Javascript 对象数组对象不工作时的角度2

我有以下数据：

组件。ts：

demo = [{
        'ob1': [{'ob1_first':'value11'}, {'ob1_second':'value12'}],
        'ob2': [{'ob2_first':'value21'}, {'ob2_second':'value22'}],
        }]

我想在视图ngFor中显示它，但我仍然得到[Object]

我的html：

<div *ngFor="let key of demo">
     {{demo[key]}}
</div>

{{demo[key]}

我的问题是:

如何在ngFor中引用对象数组对象

<div *ngFor="let key of demo">
     {{key}}
</div>

组件技术

@组件({
选择器：“我的组件”，
......
})
导出类组件{
demoArray:Demo[]；
恩戈尼尼特（）{
//如果出现此抛出错误，您可能需要替换为'demo:demo=newdemo；
演示：演示；
demo.ob1_first=“value11”；
demo.ob1_second=“value12”；
demo.ob2_first=“value21”；
demo.obj2_secon=“value22”；
演示2：演示；
demo2.ob1_first=“value11”；
demo2.ob1_second=“value12”；
demo2.ob2_first=“value21”；
demo2.obj2_secon=“value22”；
this.demoArray.push（演示）；
this.demoArray.push（demo2）；
}
}

您的json格式不正确。解决方案如下：

 <div *ngFor="let key of demo">
       {{getValue(key) |json}} <br/>
  </div>

 getValue(key){
    console.log(key)
    return Object.values(key);
 }

{{getValue（key）| json}}

getValue（键）{
console.log（键）
返回Object.values（键）；
}

---

演示是一个包含1个对象的数组

*ngFor=“let key of demo”->迭代对象，该对象在您的示例中是唯一的一个

{
       'ob1': [{'ob1_first':'value11'}, {'ob1_second':'value12'}],
       'ob2': [{'ob2_first':'value21'}, {'ob2_second':'value22'}],
   }

这将获得第一个键-> 演示[key].ob1 哪个有
[{'ob1_first'：'value11'}，{'ob1_second'：'value12'}] 作为价值

来访问这个。 你必须这样做

*ngFor="let innerkey of key.ob1"

---

然后，您可以使用innerkey访问value1。ob1_首先

对象不能直接使用*ngFor。要迭代对象，可以使用如下管道：

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'keys'
})
export class KeysPipe implements PipeTransform {

  transform(value: any, args?: any): any {
    let keys = [];
    for (let key in value) {
      keys.push(key);
    }
    return keys;
  }

}

然后，像这样使用它来迭代对象：

<div *ngFor="let item of demo | keys">
    {{demo[item]}}
</div>

{{demo[item]}

使用您指定的格式。您可以使用以下代码打印演示对象

<div *ngFor="#itemArr of demo">
    <span >{{itemArr |json}}</span>
</div>

然后将其渲染为

                  <div *ngFor="#itemArr of demo">
                        <div *ngFor="#item of itemArr">
                            <span >{{item |json}}</span>
                        </div>
                       <hr>
                    </div>

{{item | json}}

---

如果答案仍然不能解决您的问题，您是否可以声明您想要呈现的实际JSON对象。

当我这样做时，我得到：[object object]，这是因为对象中有object。因此，您需要嵌套的

*ngFor

循环。对于print

value11

您需要执行

{{key.ob1[0]。ob1_first}}

您应该在主循环中使用另一个

*ngFor

循环。是否有理由将ob1和ob2键放在其中？如果您只需要一个对象数组和一个对象数组，那么一切都会很好。只有知道键名时，该解决方案才会起作用，而不适合一般迭代。

 this.demo =
  [
      [{'ob1_first':'value11'}, {'ob1_second':'value12'}],
      [{'ob2_first':'value21'}, {'ob2_second':'value22'}]
  ]

                  <div *ngFor="#itemArr of demo">
                        <div *ngFor="#item of itemArr">
                            <span >{{item |json}}</span>
                        </div>
                       <hr>
                    </div>