如何使用 ngFor 显示多维数组？

Question

我正在使用以下 Json 显示数据。它在显示第三个内部数组时最多工作两个数组我得到 error.kindly 请建议我如何成功检索它。

<tr *ngFor="let priceRowData of solutionData.groups.requestDetails ;let $index=index ">
   <td>{{priceRowData.ReqId}}</td>
</tr>

新Json：解决方案详细信息-> 组-> 请求详细信息

 {
        "SolutionsDetail": [
            {
                "SolutionId": 658,
                "name": "dk",
                "id": 1568377327000,
                "groups": [
                    {
                        "GroupId": 1,
                        "requestDetails": [
                            {
                                "ReqId": 2331,

                            },

                        ]
                    }

                ]
            }
        ]
    }

我只想将所有请求详细信息 ID 显示到 UI。我怎样才能在这里实现。

Answer 1

您可以通过属性访问直接访问数组的元素。由于存在三个嵌套数组，您必须循环所有这些数组才能访问它们的属性。因此，您将不得不使用 3 个嵌套的 ngFor 指令来动态列出所有元素。

Html

<tr *ngFor="let priceRowData of SolutionsDetail">
  <ng-container *ngFor="let group of priceRowData.groups">
     <ng-container *ngFor="let requestDetail of group.requestDetails">
       <td>{{requestDetail.ReqId}}</td>
     </ng-container>
  </ng-container>
</tr>

Stackblitz

如何使用 ngFor 显示多维数组？

How to display multi dimensional array using ngFor?

ngfor

angular

angular-ngfor