如何在 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;