Question

我正在尝试在MatTable加载时隐藏其行。

我不能这样做：（有关完整代码，请参见StackBlitz）

<div *ngIf="!isLoading">
  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</div>

由于MatTable会引发各种错误：（

我无法将*ngIf="!isLoading"放在MatRow内，因为它已经具有结构性指令。

我想避免CSS欺骗。

我没看到什么？请赐教。

Answer 1

不能在一个元素上使用两个结构指令。使用ng-container

<ng-container *ngIf="!isLoading">
  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>

<ng-container>

Answer 2

您可以使用ng-container

<table mat-table [dataSource]="dataSource">
  ...
  <ng-container *ngIf="!isLoading">
    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
  </ng-container>
  ...
</table>

Answer 3

因此，“技巧”是使用[hidden]

<tr mat-row *matRowDef="let row; columns: displayedColumns;" [hidden]="isLoading"></tr>

但是，我最终并没有使用此解决方案，因为它使表变得“跳跃”。相反，我选择在表格页脚中放置一个微调框。

Answer 4

尝试这样做：

<div class="course">

    <div class="spinner-container" *ngIf="dataSource.loading$ | async">
        <mat-spinner></mat-spinner>
    </div>

    <mat-table class="lessons-table mat-elevation-z8" [dataSource]="dataSource">
        ....
    </mat-table>
</div>

在加载数据时，它还会添加一个漂亮的微调器。

Answer 5

我会在加载时删除数据。那里没有诡计。

Answer 6

您可以使用isLoading标志来控制displayColumns。

get displayedColumns() {
  return this.isLoading ? [] : ['position', 'name', 'weight', 'symbol'];
}

您的模板将再次变得简单并且可以很好地测试。

Answer 7

所以答案是建议的，但是您必须添加CSS使其起作用。

`因此，“技巧”就是使用[隐藏]

但是，我最终没有使用此解决方案，因为它使表“跳动”。相反，我选择在表格页脚中放置一个微调框。

mat-row[hidden] { display: none !important; }

加载数据时在mat表中隐藏行

7 个答案: