How to display multi dimensional array using ngFor?

I am displaying data using below Json. it's working fine up-to two array while displaying third inner array i am getting error.kindly please suggest me how can successfully retrieve it.

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

New Json : solutiondetail -> groups - > request details

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

                            },

                        ]
                    }

                ]
            }
        ]
    }

I just want to display all request-details id into UI. How can i achieve that here.

You can access array's element directly through property access. Since there are three nested array's, you have to loop all those array's to get access to their properties. So you will have to use 3 nested ngFor directive to list down all elements dynamically.

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