Angular 垫表错误 : Missing definitions for header and row

Question

我正在使用 Angular Material 5.2.5 中的 MatTable。我试图用通过服务器请求获得的数据填充表。

用户界面

  <mat-table [dataSource]="dataSource">
    <ng-container matColumnDef="number">
      <mat-header-cell *matHeaderCellDef>#</mat-header-cell>
      <mat-cell *matCellDef="let i = index">{{i + 1}}</mat-cell>
    </ng-container>
    <ng-container matColumnDef="name">
      <mat-header-cell *matHeaderCellDef>Name</mat-header-cell>
      <mat-cell *matCellDef="let user">{{user.userName}}</mat-cell>
    </ng-container>
    ...
  </mat-table>

组件代码

  public dataSource = new MatTableDataSource<User>()
  public displayedColumns = ['number', 'name', 'email', 'phone', 'joiningDate']

从服务器接收数据时向dataSource添加数据

 onGettingPartnerUsers(userList: User[]) {
  console.log('userList', userList)
  if (!Util.isFilledArray(userList)) {
    // TODO show message no user found
  } else {
    this.dataSource.data = userList
  }
 }

我正在获取用户列表。但是会抛出此错误。

Error: Missing definitions for header and row, cannot determine which columns should be rendered.

错在哪里？

PS:我在关注this关于使用 MatTable 的博客

Answer 1

您必须在表格中添加 mat-row 和 mat-h​​eader-row(可选)标签:

<mat-table>
  .... columns definitions

  <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
  <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
</mat-table>

在此处查看更多示例 https://material.angular.io/components/table/overview