时间戳

首页 > 解决方案 > 如何使用 ngFor 显示多维数组？

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

问题描述

我正在使用下面的 Json 显示数据。它在显示第三个内部数组时工作正常，最多两个数组我收到错误。请建议我如何成功检索它。

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

                            },

                        ]
                    }

                ]
            }
        ]
    }

我只想在 UI 中显示所有请求详细信息 id。我怎么能在这里做到这一点。

标签： angularngforangular-ngfor

解决方案

您可以通过属性访问直接访问数组的元素。由于存在三个嵌套数组，因此您必须循环所有这些数组才能访问它们的属性。因此，您将不得不使用 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>

堆栈闪电战

推荐阅读