如何在Angular HTML中用*ngFor遍历非数组格式的JSON列表

问题场景 #

从WebService拿到的JSON数据里，List是带数字键的对象（不是标准数组），直接用*ngFor遍历展示Code字段完全没效果，需要把所有Code值列出来。

原HTML代码（无效）：

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

JSON示例：

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

问题原因 #

*ngFor只支持遍历数组类型的数据，当前的List是对象结构，不是数组，所以无法直接遍历。

解决方法 #

方法一：组件内转成数组 #

拿到数据后，用Object.values()把List对象转换成数组，之后就能正常用*ngFor了：

// 假设接口返回的原始数据存在response里
this.List = Object.values(response.List);

之后原HTML代码不用改，直接就能渲染出所有Code值。

方法二：模板里直接处理（不改动组件数据） #

如果不想修改组件里的数据结构，可以在模板里直接调用Object.values()，但需要先把Object暴露给模板：

1. 在组件类里加一行：

Object = Object;

2. 修改模板代码：

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

方法三：自定义管道（适合多处复用） #

如果多个地方都需要处理这种对象转数组的场景，写个管道更方便：

1. 生成管道文件：

ng generate pipe objectToArray

2. 实现管道逻辑：

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'objectToArray'
})
export class ObjectToArrayPipe implements PipeTransform {
  transform(value: any): any[] {
    // 空值处理，避免报错
    return value ? Object.values(value) : [];
  }
}

3. 在模板里使用管道：

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

内容的提问来源于stack exchange，提问作者susnm24