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

Question

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

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

我想在加载时显示微调器：

<mat-spinner  ></mat-spinner>

我尝试： showSpinner: 布尔值 = 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<{}>'.

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>

表.组件.ts

isLoading = true;
dataSource = null;

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

现场演示

Answer 2

如果您希望微调器覆盖行（例如在分页表格上），您可以使用

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>

Answer 3

当您开始请求数据时，将

showSpinner

设置为 true，并在收到数据时将其设置为 false（也称为，在服务方法的

subscribe

中）

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

Answer 4

这是最简单的答案。在

MatTable

中有方法

*matNoDataRow

在没有数据时设置具有此属性的行。因此，您只需在收到新数据时重置您的

MatDataSource

即可。

表.组件.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>

Answer 5

可以在Angular Material 文档中找到一个很好的示例。 这是它的缩写版本：

<div class="example-container mat-elevation-z8">
  <div class="example-loading-shade">
    @if (isLoadingResults) {
     <mat-spinner></mat-spinner>
    }
 </div>
 <div class="example-table-container">

 <table mat-table [dataSource]="data" class="example-table"
       matSort matSortActive="created" matSortDisableClear matSortDirection="desc">

使用CSS：

.example-loading-shade {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 56px;
  right: 0;
  background: rgba(0, 0, 0, 0.15);
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;

}