Question

嗨，我正在尝试将所有键以json格式显示为angular 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);
      }
    );
  }

我想显示所有项目键而不是值。例如“第一，第二，第三，第四” 如果我做{{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）此方法返回对象的所有键

Angular 4遍历对象的对象

3 个答案: