Observable arrayプロパティをAngular Material Tableデータソースとして読み込む方法は？

Question

私は、Rest APIから取得された値を持つObservable配列プロパティを持っています。

現在、標準のhtmlテーブルにデータを表示するためにngForを使用しています。

ここでは、角度材料テーブル（MatTableDataSource）に切り替える必要があります。 Observablesから取得したデータを[dataSource]にロードするにはどうすればよいですか？

Answer 1

カスタムDataSourceを作成するか、MatTableDataSourceを使用する必要があります。

はここに行くhere

Answer 2

を参照してください。これでハックします。私はprocessor.serviceと呼ぶサービスで観測可能なものを持っており、同じコードを使ってすべてのテーブルにデータを設定しています。 VARSはコンポーネントであり、サービスに渡されます。

コンポーネント

getAllRecords(dbTable, dataSource, paginator) { 

    dataSource.paginator = paginator; 

    // Populate the Material2 DataTable. 
    Observable.merge(paginator.page) 
     .startWith(null) // Delete this and no data is downloaded. 
     .switchMap(() => { 
     return this.httpService.getRecords(dbTable, 
      paginator.pageIndex); 
     }) 
     .map(data => data.resource) // Get data objects in the Postgres resource JSON object through model. 

     .subscribe(data => { 
      this.dataLength = data.length; 
      dataSource.data = data; 
     }, 
     (err: HttpErrorResponse) => { 
      console.log(err.error); 
      console.log(err.message); 
      this.messagesService.openDialog('Error', 'Database not available.'); 
     } 
    ); 
    } 

私のHTMLはない

private dbTable = 'members'; // The table name where the data is. 
private dataSource = new MatTableDataSource(); 

private displayedColumns = [ 
    'firstName', 
    'lastName', 
...] 

ngAfterViewInit() { 
    this.dataSource.paginator = this.paginator; 
} 

// ------ GET ALL ----- 

    private getAllRecords() { 
    return this.mainProcessorService.getAllRecords(
     this.dbTable, 
     this.dataSource, 
     this.paginator, 
    ); 
    } 

processor.service ngForが、有用なはずです。その結果、長いページが作成され、ページネーションが必要となり、おそらくあなたが望むものが達成されます。

<mat-table #table [dataSource]="dataSource" matSort> 

     <ng-container matColumnDef="firstName"> 
      <mat-header-cell fxFlex="10%" *matHeaderCellDef> First Name </mat-header-cell> 
      <mat-cell fxFlex="10%" *matCellDef="let row"> {{row.first_name}} </mat-cell> 
     </ng-container> 


     <ng-container matColumnDef="lastName"> 
      <mat-header-cell fxFlex="10%" *matHeaderCellDef mat-sort-header> Last Name </mat-header-cell> 
      <mat-cell fxFlex="10%" *matCellDef="let row"> {{row.last_name}} </mat-cell> 
     </ng-container> 
...