angular - 如何使用 ngFor 设置带有 mat-table 的动态数据源？

Question

我正在使用 Angular Material 制作仪表板。在该仪表板上，我想为每台服务器显示一张卡片(到目前为止还不错)，并在该卡片中显示一张包含该特定服务器上客户的表格。这就是我卡住的地方。

使用下面的代码时，出现以下错误(对于每个表):

ERROR Error: Could not find column with id "name".

我的相关代码:

<mat-card class="card" *ngFor="let listItem of serverList; let i = index">
  <mat-card-header>
    <div mat-card-avatar class="card-header-image"></div>
    <mat-card-title>{{listItem.name}} - {{ listItem.datasource }}</mat-card-title>
    <mat-card-subtitle>{{listItem.url}} - {{listItem.status}}</mat-card-subtitle>
  </mat-card-header>
  <mat-card-content>
    <div class="table-container mat-elevation-z8">
      <mat-table #table [dataSource]="listItem.datasource" matSort>
        <ng-container matColumnDef="klant">
          <mat-header-cell *matHeaderCellDef mat-sort-header> Klant </mat-header-cell>
          <mat-cell *matCellDef="let element"> {{ element.name }} </mat-cell>
        </ng-container>
        <ng-container matColumnDef="status">
          <mat-header-cell *matHeaderCellDef mat-sort-header> Status </mat-header-cell>
          <mat-cell *matCellDef="let element"> {{ element.status }} </mat-cell>
        </ng-container>
        <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
        <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
      </mat-table>
    </div>
  </mat-card-content>
</mat-card>

和:

this.fbService.getServerList().subscribe( data => {
  this.serverList = data;
});

注意:我使用 Firestore 来存储服务器和客户。

本质上我的问题是如何动态设置 [dataSource]:

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

?

Answer 1

我相信数据源需要是 MatTableDataSource 类型

您可以像这样实例化一个数据源:

this.dataSource = new MatTableDataSource(this.myList);

在从您的服务收到值后尝试映射它们:

this.fbService.getServerList().subscribe(data => {
      this.serverList = data.map(el =>
        el.dataSource = new MatTableDataSource(el.dataSource);
      });