Show multiple row details for a single row in angular

Question

I need to implement something similar to this but the thing is in my data there can be multiple addresses for the same person and I want to display them in multiple rows. I am having trouble achieving this as I am fairly new to angular. Any help would be appreciated.

https://swimlane.github.io/ngx-datatable/#row-details

This is how my data looks like

[
    {
        "id": "5f451a65be59011529dc7ec5",
        "name": "Test",
        "description": "Test Description",
        "pendingChanges": [
            {
                "id": "5f451a65be59011529dc7ec6",
                "name": "Test1",
                "description": "Test Description 1",
            },
            {
                "id": "5f451a65be59011529dc7ec7",
                "name": "Test2",
                "description": "Test Description 2",
            }
        ]
    }
]

This is the html snippet

<ngx-datatable-row-detail [rowHeight]="'100%'" #rulesDetailRow (toggle)="onDetailToggle($event)">
    <ng-template let-row="row" let-expanded="expanded" ngx-datatable-row-detail-template>
        <div style="padding-left:35px;">
             <div><strong>Rule</strong></div>
             <div>{{ row.id }}</div>
        </div>
     </ng-template>
 </ngx-datatable-row-detail>

Now when I access row.id or row.name the details get displayed. But when I access row.pendingChanges.id or row.pendingChanges.name the UI displays nothing and when I use row.pendingChanges the UI displays [object Object],[object Object].

Answer 1

row.pendingChanges is an array (this is the reason you see [Object],[Object] if you write

{{row.pendingChanges}} //[object Object],[object Object]

So you can write

<div *ngFor="let item of row.pendingChanges">
   {{item.name}}{{item.description}}
</div>