Angular如何遍历值为自定义对象的Object并渲染表格？

我太懂你这困扰了——Angular的*ngFor指令默认只认数组，而你定义的team是个键值对结构的对象，直接遍历当然没效果！给你两个简单好用的解决方案，都能实现你想要的表格渲染效果：

方案1：使用Angular内置的KeyValuePipe #

这是最省心的方法，不用改组件逻辑，直接在模板里用管道把对象转成可遍历的结构：

修改你的表格模板代码：

<table>
  <tbody>
    <!-- 用keyvalue管道把对象转为{key, value}格式的数组 -->
    <tr *ngFor="let item of team | keyvalue">
      <!-- item.value就是对应的Racer实例 -->
      <td>{{item.value.number}}</td>
      <td>{{item.value.name}}</td>
      <td>{{item.value.places[0] || '-'}}</td>
    </tr>
  </tbody>
</table>

小提示：KeyValuePipe默认会按对象的键排序，如果想保持对象原本的顺序，可以自定义一个排序函数，比如在组件里加：

originalOrder() {
  return 0;
}

然后模板里写成*ngFor="let item of team | keyvalue: originalOrder"

方案2：在组件中将对象转为数组 #

如果你需要对选手列表做更多处理（比如排序、过滤），可以在组件里把team对象的值转成数组，再给模板遍历：

在你的组件类里添加一个getter：

get racersList(): Racer[] {
  // Object.values()会提取对象的所有值，返回一个Racer数组
  return Object.values(this.team);
}

然后模板里直接遍历这个数组：

<table>
  <tbody>
    <tr *ngFor="let racer of racersList">
      <td>{{racer.number}}</td>
      <td>{{racer.name}}</td>
      <td>{{racer.places[0] || '-'}}</td>
    </tr>
  </tbody>
</table>

这两种方法都能完美解决你的问题，选哪种看你后续有没有额外的业务需求~

内容的提问来源于stack exchange，提问作者Robert Głowacki