当Mat-table正在加载时添加一个旋转器？

Question

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

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<{}>'.

- Newbiiiie

Answer 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
    );
}

在线演示

- Tomasz Kula

---

很高兴能帮助到你 :) - Tomasz Kula

加载旋转器后的2秒内无法使用表格是正常的吗？ - Newbiiiie

我不认为这样做可行。如果您无法解决问题，可以单独发布一个新的问题吗？请务必包含 Stackblitz 示例。 - Tomasz Kula

对于分页表格，它并不运作良好 --> 如果有的话，旋转图标应该覆盖在任何表行之上。 - sl3dg3

对我有用，我使用了<mat-progress-bar mode="indeterminate"></mat-progress-bar>。 - Prem G

如何使用REST API实现带有表格分页的加载器？ - Zia Khan

Answer 2

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

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

- bugs

Answer 3

如果你想让 Spinner 覆盖在行上，例如在分页表格中，可以使用 position: absolute 将 Spinner 覆盖在表格之前。只需确保在父容器上设置 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>

- F.H.

Answer 4

这里是最简单的答案。在MatTable中，有一个方法*matNoDataRow，当没有数据时，它会设置带有此属性的行。因此，当接收到新数据时，您只需要重置您的MatDataSource即可。

table.component.ts

dataSource!: MatTableDataSource<any>;

getData() {
   this.dataSource = new MatTableDataSource();
   this.loading = true;

   // Retrieving some data

   this.dataSource = new MatTableDataSource(yourNewData);
   this.loading = true;
}

table.component.html

<div class="mat-elevation-z8">
     <table #table mat-table [dataSource]="dataSource" matSort>
            <!-- table here ...-->
        <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
        <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>

        <!-- Row shown when there is no data. -->
        <tr class="mat-row" *matNoDataRow>
             <td *ngIf="loading==true" class="mat-cell-load" [attr.colspan]="colspan"><mat-progress-bar mode="indeterminate" class="table-progressbar"></mat-progress-bar></td>
             <td *ngIf="loading==false" class="mat-cell" [attr.colspan]="colspan">No data matching the filter "{{input.value}}"</td>
        </tr>
     </table>
</div>

- Kirby