How to loop mat-cell object which contains array of objects in mat table

问题

I have passed array of objects which inside having array of objects to dataSource in mat table. I am unable to loop through the object which has array of objects.

    const roleListData = [
  {
    roleId: 1,
    role: "admin",
    description: "Testing",
    level: "1",
    roleFunctions: [
      {
        createdBy: "person-1",
        createdOn: "2019-11-04T20:02:52.345",
        updatedBy: null,
        updatedOn: null,
        segmentId: 2,
        segmentType: "Dealer",
        segmentName: "testing",
        segmentValue: "5",
        additionalInfo: null,
        active: true
      }
    ]
}
]

Table cell for roleFunctions:

<ng-container matColumnDef="roleFunctions">
          <th mat-header-cell *matHeaderCellDef mat-sort-header>Functions</th>
          <td mat-cell *matCellDef="let row">
            {{ item }}
          </td>
        </ng-container>

I need to get access to roleFunction object which intern have array of objects. if that array does not have any objects then also it should work fine without any issues. because as per my requirement that object may or may not contain array of objects. if they are present then i should be able to display inside object information in that table cel.

回答1:

If I understand correctly, you need to do like this to access the roleFunctions attribute inside the table.

<ng-container matColumnDef="roleFunctions">
  <th mat-header-cell *matHeaderCellDef mat-sort-header>Functions</th>
  <td mat-cell *matCellDef="let row">
    {{ row.roleFunctions }}
  </td>
</ng-container>

If you want to show all the roleFunctions, you can do:

<ng-container matColumnDef="roleFunctions">
  <th mat-header-cell *matHeaderCellDef mat-sort-header>Functions</th>
  <td mat-cell *matCellDef="let row">
    <span *ngFor="let funct of row.roleFunctions">{{func.segmentName}}</span>
  </td>
</ng-container>

来源：https://stackoverflow.com/questions/58700033/how-to-loop-mat-cell-object-which-contains-array-of-objects-in-mat-table