如何在Angular中正确显示JSON的键与值，修复keyvalue管道返回数字索引问题

你当前从接口拿到的Markets是对象数组结构，数组的每个元素都是仅包含1个键值对的独立平台对象。直接对数组使用keyvalue管道时，Angular会将其识别为普通数组处理，返回的键自然就是数组的数字索引，而非你期望的TMALL、JD这类平台名称。

提供两种可直接落地的实现方案：

• 方案1：模板层双层遍历，无需修改TS业务代码
  用两层*ngFor分别遍历数组、数组内的单个对象即可拿到正确键值，还可继续遍历分类列表做展示：

  <!-- 第一层遍历数组中的每个平台对象 -->
  <ng-container *ngFor="let marketItem of Markets">
    <!-- 第二层遍历单个平台对象的键值对 -->
    <ng-container *ngFor="let market of marketItem | keyvalue">
      <p>平台名称：{{market.key}}</p>
      <p>平台分类：</p>
      <ul>
        <li *ngFor="let category of market.value">{{category}}</li>
      </ul>
    </ng-container>
  </ng-container>
  

• 方案2：TS层预处理数据（更推荐，渲染性能更高）
  先把原数组结构合并为单个键值对对象，后续模板只需要一层遍历即可：

  // 接口返回原始数据后做转换
  this.Markets = 原始接口返回的数组.reduce((res, item) => {
    const platformKey = Object.keys(item)[0];
    res[platformKey] = item[platformKey];
    return res;
  }, {});
  

  预处理完成后，模板直接用你原有的写法就能得到正确结果：

  *ngFor="let m of Markets | keyvalue">{{m.key}} {{m.value | json}}
  

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