Angular 使用角材质2创建新的MatTable时出现TypeError

我正在使用

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)

控制台中出现的错误与第一次出现的

ID

标记有关

---

我不明白什么不起作用，因为直到昨天晚上，同样的代码才发挥了作用

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>

身份证件
{{element.id}
创建
{{element.created}
设备ID
{{element.deviceId}
不，失败
{{element.failures}

在我的组件类型脚本文件中，我将数据定义为：

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},
];

导出类MyComponent实现OnInit{
displayedColumns=['id'，'created'，'deviceId'，'failures']；
数据源：MatTableDataSource；
构造函数（）{}
恩戈尼尼特（）{
this.dataSource=新MatTableDataSource（元素）；
}
}
导出接口元素{
id：字符串；
创建：字符串；
deviceId:字符串；
故障：数量；
}
常量元素：元素[]=[
{id:'Hydrogen'，创建：“123”，设备id:“ABC123”，失败：0}，
{id:'氦'，创建：“123”，设备id:“123ABC”，失败：3}，
{id:'锂'，创建：“123”，设备id:“ABCEF5”，失败：0}，
{id:'铍'，创建：“123”，设备id:“ABC123”，失败：2}，
{id:'硼'，创建：“123”，设备id:“67ABC3”，失败：0}，
];

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

---

更新

已使用

package.json

中的库版本：

• @angular/cdk

  ：

  ^5.0.0-rc.1

• @angular/material

  ：

  ^5.0.0-rc.2

  ---

在您的软件包中。json您可以检查您拥有的角度材质的版本吗。 无论您有什么版本，请确保您的@angular/cdk是相同的版本

---

这可能是你的问题。我相信问题是您可能有更高版本的angular material，可能是

“@angular/material”：“5.0.0-rc.3”

，在该版本中，传递给

CdkHeaderCell

的

渲染器

参数不再被传递，因此您必须更新

“@angular/cdk:“5.0.0-rc.3”

以及

。我刚刚注意到您的界面中有一些错误：

deviceId

缺失，并且没有使用

lastUsage

，这是强制性的（只需像我在演示中所做的那样删除它或放置一个

？

），谢谢！是的，界面和数据的不匹配部分是为了复制粘贴代码。我看过你的演示，它看起来很清晰，但在我的项目中仍然不起作用。我甚至在我的代码库中复制粘贴了整个示例组件，但仍然得到相同的错误。注意：我已经用deviceId修复了上次的用法。您好，谢谢，我已经更新了问题，提供了

cdk

和

材料的版本，两者都是
5.0.0
，但
material
是
rc.2
，而
cdk
是
rc.1
。