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

Question

您好，我试图显示所有的关键字在json格式的角度4模板，但我得到对象对象

下面是我正在做的事情：

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

我正在遍历的json数据。

"main": [
      {
        "mainText": "demo1",
        "text": "abc",
        "keyVal": "",
        "index": "1",
        "categories": [
          {
            "id": "1.1",
            "text": "lorem ipsum",
            "keyVal": "",
            "index": "1.1",
            "items": {
              "first": true,
              "second": true,
              "third": true,
              "forth": true,
            }

和我的ts文件

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

我想要显示所有项的键，而不是值。例如"first，second，true，forth“，如果我做了{{cat.items.first}}，那么它只显示为真的值。但是我只想循环所有的项和它们的键。

Answer 1

如果你真的想简单地做到这一点，你可以使用json pipe -但是这也会显示值：

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

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

Answer 2

您可以使用Object.keys方法遍历对象的键。要在模板中使用，首先需要将其赋给一个组件变量，例如：

@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>

Answer 3

我认为你可以使用Object.keys(YOUR_OBJECT_HERE)这个方法返回一个对象的所有键