加载 Mat-table 时添加微调器？答案

【问题标题】：Add a spinner when Mat-table is loading?加载 Mat-table 时添加微调器？
【发布时间】：2019-01-03 05:07:31
【问题描述】：

我像这样在我的材料表中加载数据：

ngOnInit(){ return this.annuairesService.getMedecins().subscribe(res => this.dataSource.data = res);}

我想在加载时显示微调器：<mat-spinner ></mat-spinner>

我尝试： showSpinner: boolean = true;

ngOnInit(){ return this.annuairesService.getMedecins()
.subscribe(res => this.dataSource.data = res);
this.dataSource.subscribe(() => this.showSpinner = false }

但我有这个错误：

src/app/med-list/med-list.component.ts(54,21): error TS2339: Property 'subscribe' does not exist on type 'MatTableDataSource<{}>'.

【问题讨论】：

标签： angular typescript spinner datasource

【解决方案1】：

table.component.html

<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">

  <!-- table here ...-->

  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>

<div *ngIf="isLoading" 
   style="display: flex; justify-content: center; align-items: center; background: white;">
  <mat-progress-spinner 
    color="primary" 
    mode="indeterminate">
  </mat-progress-spinner>
</div>

table.component.ts

isLoading = true;
dataSource = null;

ngOnInit() {
    this.annuairesService.getMedecins()
       subscribe(
        data => {
          this.isLoading = false;
          this.dataSource = data
        }, 
        error => this.isLoading = false
    );
}

Live demo

【讨论】：

很高兴我能帮上忙 :)
spinner 加载后 2 秒内无法使用桌子是正常的吗？
我不这么认为。如果您无法修复它，可以将其作为单独的问题发布？确保包含 stackblitz 示例。
对于分页表来说效果不佳 --> 微调器应该覆盖任何表行，如果有的话。

【解决方案2】：

在您开始请求数据时将showSpinner 设置为true，并在您收到数据时将其设置为false（也就是在您的服务方法的subscribe 中）

ngOnInit() {
  this.showSpinner = true;
  this.annuairesService.getMedecins()
    .subscribe(res => {
      this.showSpinner = false;
      this.dataSource.data = res;
    });
}

【讨论】：

【解决方案3】：

如果您希望微调器覆盖行，例如在分页表上，您可以使用position: absolute 将微调器覆盖放在表格之前。只需确保在父容器上设置position: relative，这样叠加层就不会扩展它的父容器大小。

      <div class="mat-elevation-z8 mt-3" style="position: relative;">
        <div style="display: flex;
        justify-content: center;
        align-items: center;
        background: rgba(255, 255, 255, 0.6);
        position: absolute;
        width: 100%;
        height: 100%;
        z-index: 1;" *ngIf="isLoading" >
          <mat-progress-spinner color="accent" mode="indeterminate" diameter="50">
          </mat-progress-spinner>
        </div>
        <table mat-table [dataSource]="data" matSort matSortActive="createDate"
          matSortDisableClear matSortDirection="desc">
          ....
        </table>
        <mat-paginator [length]="data_count" [pageSize]="10"></mat-paginator>
      </div>

【讨论】：