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

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-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

Answer 2

添加以下代码：

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

在结束之前关闭你的表格标签</table>