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

Question

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.

Jorge Mussato · Accepted Answer · 2019-11-04 21:07:56Z

5

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>

answered Nov 4, 2019 at 21:07

Jorge Mussato

2,5942 gold badges13 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Kireeti Over a year ago

Yes, Jorge. It has worked out for me by your approach. Thanks a lot for your response...

Collectives™ on Stack Overflow

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

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related