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

所以“诀窍”就是 [hidden]

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

然而,我并没有使用这个解决方案,因为它使桌子变得“神经质”。相反,我选择在表尾放置一个微调器。

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

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

<ng-container>

我会删除加载时的数据。别耍花招。

ng-container

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

尝试这样做:

<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>

您可以使用isLoading标志控制显示的列。

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

你的模板将再次简单,它是很好的测试。