缺少页眉、页脚和行的定义；无法确定应呈现哪些列 - Angular Material Table答案

【问题标题】：Missing definitions for header, footer, and row; cannot determine which columns should be rendered - Angular Material Table缺少页眉、页脚和行的定义；无法确定应呈现哪些列 - Angular Material Table
【发布时间】：2020-07-08 09:47:44
【问题描述】：

我正在使用 Angular 9.0.4 和 @angular/material 9.1.3，我想展示一个基本的材料表：

<table mat-table [dataSource]="devizas" class="mat-elevation-z8">
  <!-- name -->
  <ng-container matColumnDef="name">
    <th mat-header-cell *matHeaderCellDef>Name</th>
    <td mat-cell *matCellDef="let element"> {{ element.name }} </td>
  </ng-container>

  <!-- code -->
  <ng-container matColumnDef="code">
    <th mat-header-cell *matHeaderCellDef>Code</th>
    <td mat-cell *matCellDef="let element"> {{ element.code }} </td>
  </ng-container>
</table>

我在我的 app.module.ts 中导入了这个：

import { MatTableModule } from '@angular/material/table';

@NgModule({
  imports: [
    MatTableModule,
  ],
})

在我的 component.ts 中：

export class DevizaListComponent implements OnInit {
  devizas: DevizaInterface[] = [
    {
      name: 'dollar',
      code: 'USD' ,
    }
  ];

  constructor() { }

  ngOnInit() { }
}

现在我在浏览器中收到此错误消息：

错误：缺少页眉、页脚和行的定义；无法确定应呈现哪些列。在 getTableMissingRowDefsError (table.js:996) 在 MatTable.push../node_modules/@angular/cdk/ivy_ngcc/fesm5/table.js.CdkTable.ngAfterContentChecked (table.js:1296)

官方文档没有说明任何相关内容。有什么想法吗？

【问题讨论】：

material site 上的所有表格示例都包括mat-header-row 和mat-row。你两个都没有。
@R.Richards，“示例”只是渲染。 代码示例在 Laniakea Supercluster 中的什么位置？ Material 文档在这件事上非常可悲。初次使用的用户不会知道 mat-table 有什么神奇的。
@Cody 我引用的链接中的所有“示例”都有指向 StackBIitz 中代码的链接，以及查看代码链接。每个示例的右上角。 < > 图标在哪里。
哦。 8° 我不知道我是怎么错过的。谢谢！

标签： angular typescript angular-material angular-material-table

【解决方案1】：

您在html 代码中缺少以下行：

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

在component.ts文件中创建一个列定义如下的数组：

columndefs : any[] = ['name','code'];
更新表格代码如下：

<table mat-table [dataSource]="devizas" class="mat-elevation-z8">
          <ng-container matColumnDef="name">
            <th mat-header-cell *matHeaderCellDef>Name</th>
            <td mat-cell *matCellDef="let element"> {{ element.name }} </td>
          </ng-container>
        
          <ng-container matColumnDef="code">
            <th mat-header-cell *matHeaderCellDef>Code</th>
            <td mat-cell *matCellDef="let element"> {{ element.code }} </td>
          </ng-container>
        
          <tr mat-header-row *matHeaderRowDef="columndefs"></tr>
          <tr mat-row *matRowDef="let row; columns: columndefs;"></tr>
        
        </table>

这里是演示：demo

【讨论】：

【解决方案2】：

试试这个！

<table mat-table [dataSource]="devizas" class="mat-elevation-z8">
 ....

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

【讨论】：