在 angular 中显示单行的多行详细信息

Question

我需要实现与此类似的东西，但在我的数据中，同一个人可以有多个地址，我想将它们显示在多行中。由于我对 angular 还很陌生，所以我很难做到这一点。任何帮助将不胜感激。

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

这是我的数据的样子

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

这是 html 片段

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

现在，当我访问 row.id 或 row.name 时，会显示详细信息。但是当我访问 row.pendingChanges.id 或 row.pendingChanges.name 时 UI 什么都不显示，当我使用 row.pendingChanges 时 UI 显示 [object Object],[object Object].

Answer 1

row.pendingChanges 是一个数组（这就是你看到 [Object],[Object] 的原因，如果你写

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

所以你可以这样写

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

在 angular 中显示单行的多行详细信息

Show multiple row details for a single row in angular

ngx-datatable

angular