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

【问题标题】：How to display multi dimensional array using ngFor?如何使用 ngFor 显示多维数组？
【发布时间】：2020-01-24 07:42:33
【问题描述】：

我正在使用下面的 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。我怎样才能在这里实现。

【问题讨论】：

标签： angular ngfor angular-ngfor

【解决方案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

【讨论】：

我收到此错误类型错误：无法读取未定义的属性“长度”
@DharamChauhan 听起来像您认为包含数组的变量/属性之一实际上是undefined。或者，在您的应用运行时，其中一个变量/属性正在更改为 undefined。