Как отобразить многомерный массив с помощью ngFor?

Question

Я отображаю данные, используя ниже Json.он работает нормально, до двух массивов, при отображении третьего внутреннего массива я получаю сообщение об ошибке. Пожалуйста, подскажите, пожалуйста, как можно успешно его извлечь.*

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

                            },

                        ]
                    }

                ]
            }
        ]
    }

Я просто хочу отобразить весь идентификатор запроса в 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