ngFor 内部的 mat-table 数据源答案

【问题标题】：mat-table Datasource inside of ngForngFor 内部的 mat-table 数据源
【发布时间】：2019-06-20 15:38:59
【问题描述】：

我正在尝试在 ngFor 中设置一个动态数据源，但是 angular (angular-cli 7.3.8) 抛出了这个异常：

错误类型错误：无法读取未定义的属性“模板” MatRowDef.push../node_modules/@angular/cdk/esm5/table.es5.js.BaseRowDef.extractCellTemplate

这是我目前的代码

<div *ngFor="let item of data.key4">
    <p> {{item.key12}} </p>
    <mat-table #table [dataSource]="item.key13">
      <ng-container matColumnDef="column1">
        <mat-header-cell *matHeaderCellDef>column1</mat-header-cell>
        <mat-cell> {{item.key11}} </mat-cell>
      </ng-container>
      <ng-container matColumnDef="column2">
        <mat-header-cell *matHeaderCellDef>column2</mat-header-cell>
        <mat-cell *matCellDef="let element"> {{element.21}} </mat-cell>
      </ng-container>
      <ng-container matColumnDef="column3">
        <mat-header-cell *matHeaderCellDef>column3</mat-header-cell>
        <mat-cell *matCellDef="let element"> {{item.22}} </mat-cell>
      </ng-container>
      <ng-container matColumnDef="column4">
        <mat-header-cell *matHeaderCellDef>column4</mat-header-cell>
        <mat-cell *matCellDef="let element"> {{element.23}} </mat-cell>
      </ng-container>
      <ng-container matColumnDef="column5">
        <mat-header-cell *matHeaderCellDef>column5</mat-header-cell>
        <mat-cell *matCellDef="let element"> {{element.24}} </mat-cell>
      </ng-container>
      <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
      <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
    </mat-table>
</div>

由于隐私政策，我进行了修改，但我保留了结构

下面是我的 TS 文件（也修改过）

export class teste implements OnInit {

  displayedColumns = [
    'column1', 
    'column2', 
    'column3', 
    'column4', 
    'column5'
  ]

  constructor(public dialogRef: MatDialogRef<teste>,
    @Inject(MAT_DIALOG_DATA) public data: object) { }

  ngOnInit() {
  }

}

最后这是我的 JSON 数据

{
    "key1": "value1",
    "key2": "value2",
    "key3": "value3",
    "key4": [{
        "key11": "value11",
        "key12": "value12",
        "key13": [{
            "key21": "value21",
            "key22": 123.45,
            "key23": 987.55,
            "key24": 1500
        }]
    }]
}

有什么想法吗？谢谢

【问题讨论】：

标签： angular

【解决方案1】：

我认为您的问题在于<mat-cell> {{item.key11}} </mat-cell>，因为它没有*matCellDef。

由于 Angular Material 表建立在 CDK 数据表的基础上，并且根据 CDK table documentation *cdkCellDef 是必要的：

请注意，cdkCellDef 会导出行上下文，以便可以在单元格模板中引用行数据。该指令还导出与 ngFor 相同的属性（索引、偶数、奇数、第一个、最后一个）。

【讨论】：