在angular 7中使用ngFor遍历数组数组

Question

我需要在我的angular 7 UI上显示一个列表。该列表按产品类型分类，如屏幕截图所示。每个产品类型后面也应该有一个空格

我尝试了一些操作，但是显示的结果与屏幕截图中的显示不同。有人可以告诉我我要去哪里哪里

UI

<div *ngIf="AllocationDetails && AllocationDetails.MissingProducts">


                      <table *ngFor="let key of AllocationDetails.MissingProducts; let i = index">
                        <tr>
                          <th>{{key[i].ProductType}}</th>

                        </tr>
                        <tr *ngFor="let key of AllocationDetails.MissingProducts; let j = index">
                          <td>{{key[j].ProductName}}</td>

                        </tr>
                      </table>


    </div>

这是数组的样子

JSON格式

[[{"ProductId":2844,"ProductName":"*DO NOT USE* City Plan LLC","ProductType":"Strategic Partnerships"},{"ProductId":2840,"ProductName":"*DO NOT USE* Baha'i Separate Managed Account","ProductType":"Strategic Partnerships"},{"ProductId":2851,"ProductName":"Test Special Opportunities Evergreen Fund Ltd.","ProductType":"Strategic Partnerships"},{"ProductId":2852,"ProductName":"Test Spafid Multi-Strategy Fund","ProductType":"Strategic Partnerships"}],[{"ProductId":2745,"ProductName":"Test Special Opportunities Fund III Master LP","ProductType":"Commingled Fund"},{"ProductId":2854,"ProductName":"Test Select Opportunities II Ltd.","ProductType":"Commingled Fund"},{"ProductId":2746,"ProductName":"Test Structured Income Fund I Ltd.","ProductType":"Commingled Fund"},{"ProductId":2749,"ProductName":"Test Structured Income Fund II Ltd.","ProductType":"Commingled Fund"},{"ProductId":2778,"ProductName":"Test Structured Income Fund II-A Ltd.","ProductType":"Commingled Fund"},{"ProductId":2794,"ProductName":"Test Hedge Fund Opportunities II Ltd. Continuing","ProductType":"Commingled Fund"}],[{"ProductId":2828,"ProductName":"ICBC Quantitative HengSheng Choice Pooled Fund.","ProductType":"Sub-Advisory "},{"ProductId":2853,"ProductName":"HEC SPV II Cayman LP","ProductType":"Sub-Advisory "},{"ProductId":2800,"ProductName":"TP ETP Offshore LP","ProductType":"Sub-Advisory "},{"ProductId":2829,"ProductName":"ICBC Quantitative Xincheng Choice Pooled Fund Trust.","ProductType":"Sub-Advisory "},{"ProductId":1841,"ProductName":"Brightgate Absolute Return FIL","ProductType":"Sub-Advisory "}],[{"ProductId":2827,"ProductName":"Test Alternative Income Strategy.","ProductType":"Liquid Alternatives"},{"ProductId":1603,"ProductName":"Test Alternative Core Fund","ProductType":"Liquid Alternatives"}]]

Answer 1

您正在遍历嵌套数组，并且只能访问key[x]。您想要的是key[i][j]

此行是错误的：

 <td>{{key[j].ProductName}}</td>

替换为：

 <td>{{key[i][j].ProductName}}</td>