如何在 Angular HTML 中使用 *ngFor 顯示 JSON 列表

Question

我從 web 服務中得到了 JSON 格式的結果，就像這些示例一樣。 我如何遍歷這些項目來呈現對象

HTML 代碼 - 不工作

<div *ngFor="let item of List">
  {{item.Code}}
</div>

JSON樣品

"List": {
  "0": {
         "Code": "A"
       },
  "1": {
         "Code": "B"
       },
  "2": {
         "Code": "C",
       }
  }

不幸的是，網絡服務不提供這個作為對象的數組 []

我想查看密鑰“代碼”的所有項目列表

Answer 1

您可以像這里一樣使用 KeyValuePipe。

所以你的代碼將是這樣的：

<div *ngFor="let item of List | keyvalue">
  {{item.value.Code}}
</div>

Answer 2

因為它沒有與

<div *ngFor="let item of List | keyvalue">
  {{item.value.Code}}
</div>

Typescript 拋出錯誤，因為 {{item.value.Code}} 未知。

我做了一些額外的研究並找到了以下解決方案

<div *ngFor='let key of objectKeys(List)'>
  {{List[key].Code}} 
</div>

在typescript class對應的html文件中你要加上

objectKeys = Object.keys;