ng用于嵌套对象列表

Question

我有一个嵌套对象列表，正在使用ngFor进行迭代。但是当我想访问某个子对象的属性时，我必须从根对象编写所有属性的链。我正在尝试定义其他变量并为其分配子对象。基本上我想做的是下面这样的东西，但它给出了错误，我相信这不是正确的语法

<div *ngFor="let obj of objs; let child = obj.childObject">
<span>{{ child.name }}</span>
<div/>

我怎样才能做到这一点？

Answer 1

试试这个

<div *ngFor="let obj of objs;">
<ng-container *ngFor="let child of obj.childObject;>
<span>{{ child.name }}</span>
</ng-container>
<div/>

Answer 2

检查我的例子，这是工作

<div *ngFor="let catergory of Catergories;">
<span>{{ catergory.name }}</span>
<div *ngFor="let product of catergory.products;>
<span>{{ product.name }}</span>
</div>
<div/>

Answer 3

为什么不遍历span内的对象链：

<span *ngFor="let obj of objs">{{ obj.childObject.name }}</span>

阅读评论后编辑。以上用于显示特定的childobject属性。

如果目标是打印childobject的所有属性，则在组件的类中定义objectKeys变量：

export class MyComponent {
objectKeys = Object.keys;
...
}

然后提供要迭代键的集合作为参数，以在组件的 html 中objectKeys：

<div *ngFor="let obj of objs">
<span *ngFor="let key of objectKeys(obj.childobject)">{{key + ' : ' + obj.childobject[key]}}</span>
<div/>