使用 Angular Material 2 创建新的 MatTable 时出现 TypeError答案

【问题标题】：TypeError when creating a new MatTable with Angular Material 2使用 Angular Material 2 创建新的 MatTable 时出现 TypeError
【发布时间】：2018-05-13 03:58:37
【问题描述】：

我正在使用mat-table（来自MatTableModule）创建一个表，但出现以下错误：

ERROR TypeError: Cannot read property 'addClass' of undefined
  at MatHeaderCell.CdkHeaderCell (table.es5.js:275)
  at new MatHeaderCell (table.es5.js:132)
  at createClass (core.js:12166)
  at createDirectiveInstance (core.js:12011)
  at createViewNodes (core.js:13449)
  at createEmbeddedView (core.js:13327)
  at callWithDebugContext (core.js:14740)
  at Object.debugCreateEmbeddedView [as createEmbeddedView] (core.js:14070)
  at TemplateRef_.createEmbeddedView (core.js:11414)
  at ViewContainerRef_.createEmbeddedView (core.js:11130)

控制台中出现的错误与<mat-header-cell *matHeaderCellDef> ID </mat-header-cell>标签的第一次出现有关。

我不明白什么是行不通的，因为直到昨天晚上，相同的代码都像魅力一样工作。

component.html 文件中的表格

<mat-table #table [dataSource]="dataSource" style="text-align:center">
    <!-- Id Column -->
    <ng-container matColumnDef="id">
        <mat-header-cell *matHeaderCellDef> ID </mat-header-cell>
        <mat-cell *matCellDef="let element"> {{element.id}} </mat-cell>
    </ng-container>
    <!-- Creation date Column -->
    <ng-container matColumnDef="created">
        <mat-header-cell *matHeaderCellDef> Created </mat-header-cell>
        <mat-cell *matCellDef="let element"> {{element.created}} </mat-cell>
    </ng-container>
    <!-- Device ID Column -->
    <ng-container matColumnDef="deviceId">
        <mat-header-cell *matHeaderCellDef> Device ID </mat-header-cell>
        <mat-cell *matCellDef="let element"> {{element.deviceId}} </mat-cell>
    </ng-container>
    <!-- Failures Column -->
    <ng-container matColumnDef="failures">
        <mat-header-cell *matHeaderCellDef> No. Failures </mat-header-cell>
        <mat-cell *matCellDef="let element"> {{element.failures}} </mat-cell>
    </ng-container>

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

在我的组件 TypeScript 文件中，我将数据定义为：

export class MyComponent implements OnInit {
  displayedColumns = ['id', 'created', 'deviceId', 'failures'];
  dataSource:MatTableDataSource<Element>;

  constructor() { }

  ngOnInit() {
    this.dataSource = new MatTableDataSource<Element>(ELEMENTS);
  }
}

export interface Element {
  id: string;
  created: string;
  deviceId: string;
  failures: number;
}
const ELEMENTS: Element[] = [
  {id: 'Hydrogen', created: "123", deviceId: "ABC123", failures: 0},
  {id: 'Helium', created: "123", deviceId: "123ABC", failures: 3},
  {id: 'Lithium', created: "123", deviceId: "ABCEF5", failures: 0},
  {id: 'Beryllium', created: "123", deviceId: "ABC123", failures: 2},
  {id: 'Boron', created: "123", deviceId: "67ABC3", failures: 0},
];

那么，很明显，TS 中的数据和 HTML 中的表格单元格是匹配的，是什么导致这个错误出现？

更新

使用的库版本来自package.json:

@angular/cdk:^5.0.0-rc.1;
@angular/material:^5.0.0-rc.2;

【问题讨论】：

Works for me。我刚刚注意到您的界面中存在一些错误：deviceId 缺失，lastUsage 未被使用并且是强制性的（只需将其删除或像我在演示中所做的那样放置 ?）。
谢谢！是的，界面和数据的不匹配部分是由于复制粘贴代码。我看过你的演示，看起来很清楚，但在我的项目中仍然不起作用。我什至将整个示例组件复制粘贴到我的代码库中，但仍然出现相同的错误。
注意：我已经用 deviceId 修复了 lastUsage。

标签： angular typescript material-design angular2-directives angular-material2

【解决方案1】：

在您的 package.json 中，您可以检查您拥有的 Angular 材料的版本。无论您拥有什么版本，请确保您的 @angular/cdk 是相同的版本。

这很可能是你的问题。我相信问题是你可能有更高版本的角度材料可能"@angular/material": "5.0.0-rc.3" 并且在那个版本中传递给CdkHeaderCell 的renderer 参数不再被传递，因此你必须更新"@angular/cdk": "5.0.0-rc.3"

【讨论】：

嗨，谢谢，我已经更新了提供cdk 和material 版本的问题，两者都是5.0.0 但material 是rc.2 而cdk 是@987654331 @.