mat-table Datasource inside of ngFor

Question

I'm trying to set a dynamic DataSource inside of ngFor, but angular (angular-cli 7.3.8) is throwing this exception :

ERROR TypeError: Cannot read property 'template' of undefined at MatRowDef.push../node_modules/@angular/cdk/esm5/table.es5.js.BaseRowDef.extractCellTemplate

This is my code so far

<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>

I modified due to privacy policies, but I kept the structure

Below it is my TS file (also modified)

export class teste implements OnInit {

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

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

  ngOnInit() {
  }

}

and finally this is my JSON data

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

Any ideas? Thank you

Answer 1

I think your problem is with <mat-cell> {{item.key11}} </mat-cell> as it does not have the *matCellDef .

As Angular Material table builds on the foundation of the CDK data-table and according to the CDK table documentation *cdkCellDef is necessary:

Note that cdkCellDef exports the row context such that the row data can be referenced in the cell template. The directive also exports the same properties as ngFor (index, even, odd, first, last).