web-dev-qa-db-ja.com

マットテーブルの読み込み中にスピナーを追加しますか？

そのような材料テーブルにデータをロードします：

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

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>

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

table.component.ts

isLoading = true;
dataSource = null;

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

ライブデモ

32
Tomasz Kula

データのリクエストを開始するときにshowSpinnerをtrueに設定し、受信したときにそれをfalseに設定します（サービスメソッドのsubscribeで）

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