角度垫表错误：缺少标题和行的定义

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：我正在关注使用MatTable的this博客

Answer 1

您必须在表格中添加mat-row和mat-header-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