[英]How to display the table from nested json array in angular?
我正在使用角度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 ”。
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>
如果您只想顯示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>
這是工作示例:
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.