如何在Angular中用*ngFor循环并显示对象的键？

你直接在模板里用Object.keys(scores)无效，是因为Angular模板不允许直接调用全局对象的方法。下面给你两种可行的解决方式：

方法一：在组件类中定义属性返回键数组 #

在组件.ts文件里，添加一个getter属性来获取对象的键：

import { Component } from '@angular/core';

@Component({
  selector: 'app-scores',
  templateUrl: './scores.component.html'
})
export class ScoresComponent {
  scores = {
    "grade1": {"math":"120","english":"100"},
    "grade2": {"math":"50","english":"50"},
    "grade3": {"math":"90","english":"70"}
  };

  // 定义getter获取对象的键
  get gradeKeys() {
    return Object.keys(this.scores);
  }
}

然后在模板.html里使用*ngFor遍历这个属性：

<div *ngFor="let key of gradeKeys">
  Field: {{ key }}
</div>

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

从Angular 6.1版本开始，官方提供了KeyValuePipe，可以直接在模板里将对象转换为键值对数组：

<div *ngFor="let item of scores | keyvalue">
  Field: {{ item.key }}
</div>

这种方式不需要修改组件类，直接在模板里处理即可，非常便捷。

两种方法最终都会输出你想要的效果：

Field: grade1 
Field: grade2 
Field: grade3

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