Angular 角度4通过对象中的对象循环

嗨，我正试图以json格式显示angular 4模板中的所有键，但我得到了object

我现在做的是：

<div *ngFor="let cat of mainData.categories; index as i">
      <p>
        {{ cat.items}}
      </p> 
</div>

还有我的ts文件

showData() {
    this.myform.getData().subscribe(
      info => {
        if (info) {
         this.mainData = info[0].main[0];
        }
      },
      error => {
        console.log(error);
      }
    );
  }

我想显示所有项目，而不是值。例如第一，第二，第三，第四

---

如果我执行{{cat.items.first}}，那么它只显示为true的值。但是我只想循环所有项目及其键。

如果您想非常简单地执行此操作，可以使用-但是这也会显示值：

<div *ngFor="let cat of mainData.categories; index as i">
      <p>
        {{ cat.items | json}}
      </p> 
</div>

---

输出将是格式化为字符串的json数据。

我认为您可以使用Object.keysYOUR\u Object\u此方法返回对象的所有键。

您可以使用此方法在对象的键上迭代。要在模板中使用，首先需要将其指定给组件变量，如：

@Component({
  selector: ...,
  template: ...
})

export class YourComponent {
   objectKeys = Object.keys;
   constructor(){}
}

然后在模板中使用它：

<div *ngFor="let cat of mainData.categories">
  <p *ngFor="let key of objectKeys(cat.items)">
    {{ key }}
  </p> 
</div>

<div *ngFor="let cat of mainData.categories">
  <p *ngFor="let key of objectKeys(cat.items)">
    {{ key }}
  </p> 
</div>