Question

我正在尝试在ngFor内设置动态数据源，但是angular（angular-cli 7.3.8）抛出此异常：

错误TypeError：无法读取以下位置的undefined属性“ template” 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
        }]
    }]
}

有什么想法吗？谢谢

Answer 1

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

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

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

ngFor内部的mat-table数据源

1 个答案: