如何以角度显示嵌套json数组中的表？

Question

我正在使用角度7，我想在表格中显示嵌套的json数据。 我的Json结构：

{
  "id": "1",
  "referenceNumber": "P123",
  "supplierNote": "My Notes",
  "internalNote": "Your notes",
  "purchaseOrderProducts": [
   {
      "purchaseId": "p1",
      "quantity": 1000,
   },
   {
      "purchaseId": "p2",
      "quantity": 500,
   }
 ]
}

我想使用angular在表格中显示值“ purchaseId ”和“ quantity ”。

Answer 1

Use *ngFor in the html for the above
assuming the above json is an Object purchase

<table>
<div *ngFor="let obj of purchase.purchaseOrderProducts">
<tr>{{obj.purchaseId}}</tr>
<tr>{{obj.quantity}}</tr>
</div>
</table>

Answer 2

如果您只想显示purchaseid和quantity信息，那么您可以使用*ngFor指令循环遍历purchaseOrderProducts数组并显示数据。

HTML将如下所示：

<table bordar="2">
    <tr>
        <th>purchaseId</th>
        <th>quantity</th>
    </tr>
    <tr *ngFor="let data of arrObj?.purchaseOrderProducts">
        <td>    {{data.purchaseId}}</td>
        <td>{{data.quantity}}</td>
    </tr>
</table>

这是工作示例：

https://stackblitz.com/edit/angular-dfsfpr