Angular中如何遍历值为Racer对象的team对象并渲染表格？

你碰到的问题很典型：Angular的*ngFor指令默认只能遍历数组，而你的team是一个键值对对象（键是数字9/10/11，值是Racer实例），所以直接遍历会无效。下面给你两种简单可行的解决方案：

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

Angular提供了专门处理对象遍历的KeyValuePipe，它会把对象转换成包含key和value的数组项，直接在模板里使用即可：

修改后的模板代码 #

<table>
  <tbody>
    <!-- 使用keyvalue管道转换对象，遍历键值对 -->
    <tr *ngFor="let entry of team | keyvalue">
      <td>{{entry.value.number}}</td>
      <td>{{entry.value.name}}</td>
      <td>{{entry.value.places[0] || '-'}}</td> <!-- 处理places为空的情况，避免显示undefined -->
    </tr>
  </tbody>
</table>

说明 #

• keyvalue管道会将team对象转换成类似[{key: '9', value: Racer实例}, ...]的数组
• 我们需要的是value属性里的Racer实例，所以用entry.value来访问其属性
• 额外添加|| '-'是为了处理places数组为空的场景，让页面显示更友好

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

如果你不需要用到对象的键（比如9/10/11），可以在组件里把team的取值转换成数组，用Object.values()方法即可：

组件代码修改 #

export class YourComponent {
  team = {
    9: new Racer(9, 'John Nowak', []),
    10: new Racer(10, 'Anthony Hopk', []),
    11: new Racer(11, 'Pablo Escobarr', []),
  };

  // 创建一个getter返回Racer实例的数组
  get racers(): Racer[] {
    return Object.values(this.team);
  }
}

模板代码修改 #

<table>
  <tbody>
    <!-- 直接遍历转换后的数组 -->
    <tr *ngFor="let racer of racers">
      <td>{{racer.number}}</td>
      <td>{{racer.name}}</td>
      <td>{{racer.places[0] || '-'}}</td>
    </tr>
  </tbody>
</table>

说明 #

• Object.values(this.team)会直接提取对象的所有值，返回一个Racer[]数组
• 使用getter的好处是：如果team后续有动态修改，Angular的变更检测会自动更新这个数组，不需要手动维护

两种方法都能实现你想要的表格渲染效果，根据是否需要使用对象的键来选择即可。

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