Angular中如何遍历对象并以键值对形式展示？

问题分析 #

你当前的代码把conveyors.data.conveyor的键名转成了数组，再用keyvalue管道遍历这个数组，导致输出的是数组索引和对应键名的重复内容。而实际需要的是遍历conveyors.data.conveyor这个对象本身，获取每个键对应的完整数据项。

解决方案 #

步骤1：修正TypeScript代码 #

无需将对象键转为数组，直接保留原始对象的引用即可：

ngOnInit() {
    this.service.getConveyors()
    .subscribe(response => {
      this.conveyors = response;
      // 移除Object.keys相关代码，直接使用conveyors.data.conveyor对象
  });

步骤2：调整HTML模板 #

直接遍历conveyors.data.conveyor对象，结合keyvalue管道获取键名和对应的数据值，同时添加数据加载判断避免报错：

<div *ngIf="conveyors?.data?.conveyor">
  <div *ngFor="let item of conveyors.data.conveyor | keyvalue">
    <p>键名: <b>{{item.key}}</b></p>
    <!-- 根据API返回的字段，替换为实际属性名展示完整数据 -->
    <p>ID: {{item.value.id}}</p>
    <p>名称: {{item.value.name}}</p>
    <p>状态: {{item.value.status}}</p>
    <hr>
  </div>
</div>

可选：保持对象原始遍历顺序 #

默认keyvalue管道会按键名升序排序，若要保留对象的原始属性顺序，可以在组件类中定义排序函数：

// 组件类中添加排序函数
preserveOrder(a: KeyValue<string, any>, b: KeyValue<string, any>): number {
  return 0;
}

然后在模板中使用该函数：

<div *ngFor="let item of conveyors.data.conveyor | keyvalue:preserveOrder">
  <!-- 内容同上 -->
</div>

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