我從 API 中檢索到以下形式的資料
[
{
"end_date": 1640908800000,
"rev": 151,
"usage_limit": 0,
"reason_deleted": null,
"picture_detail": "test",
"revtype": 0,
"linked_type": "SPECIFIC",
"modified_date": 1644893309181,
"type": "OPEN",
"created_by": "[email protected]",
"is_multiple": null,
"campaign_name": "Blewah 2022",
"is_deleted": false,
"is_auto_apply": true,
"modified_by": "[email protected]",
"campaign_code": "BLEWAH2",
"id": 76,
"created_date": 1644893309181,
"picture_banner": "test",
"remarks": "Lorem ipsum dolor sit amet.",
"start_date": 1609459200000,
"status": "APPROVED"
},
{
"end_date": 1644969600000,
"rev": 152,
"usage_limit": 0,
"reason_deleted": null,
"picture_detail": "",
"revtype": 0,
"linked_type": "SPECIFIC",
"modified_date": 1644900601884,
"type": "OPEN",
"created_by": "[email protected]",
"is_multiple": null,
"campaign_name": "BLEWAH 4",
"is_deleted": false,
"is_auto_apply": false,
"modified_by": "[email protected]",
"campaign_code": "BLEWAH",
"id": 78,
"created_date": 1644900601884,
"picture_banner": "",
"remarks": "",
"start_date": 1644883200000,
"status": "APPROVED"
},
{
"end_date": 1644969600000,
"rev": 153,
"usage_limit": 0,
"reason_deleted": null,
"picture_detail": "",
"revtype": 1,
"linked_type": "SPECIFIC",
"modified_date": 1644900601884,
"type": "OPEN",
"created_by": "[email protected]",
"is_multiple": null,
"campaign_name": "BLEWAH 4",
"is_deleted": false,
"is_auto_apply": false,
"modified_by": "[email protected]",
"campaign_code": "BLEWAH",
"id": 78,
"created_date": 1644900601884,
"picture_banner": "",
"remarks": "",
"start_date": 1644883200000,
"status": "APPROVED"
},
]
現在我需要獲取該陣列中的資料，并使用 Typescript 將其顯示在 Angular 11 上的表上，或者它是鍵，例如"start_date"，以及鍵的值，例如 "status": "APPROVED"。我已經嘗試使用Object.value和Object.key，但是回傳是這樣的
我得到了密鑰，但值就像 [Object]。我需要使用 Angular Material Table 獲取值并將其顯示在表格上。有人能幫助我嗎？謝謝你。
uj5u.com熱心網友回復：
如果構建一個表格顯示，您還可以制作一個標題陣列，從第一個元素按下鍵并在模板中顯示標題并回圈遍歷 json 中的專案并顯示它們。喜歡：https ://stackblitz.com/edit/angular-key-value-table-qnctbf
uj5u.com熱心網友回復：
使用keyvalue管道。
<tr *ngFor="let item of items">
<ng-container *ngFor="let prop of item | keyvalue">
<td> prop.key </td>
<td> prop.value </td>
</ng-container>
</tr>
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/429798.html