递归列表 connat 读取属性 'length' 的未定义

Question

我正在做一个递归列表，但我无法获得整个列表。

<ul>
<ng-container
*ngTemplateOutlet="recursiveListTmpl; context:{ list: famillies }"
></ng-container>
</ul>
<ng-template #recursiveListTmpl let-list="list">
<li *ngFor="let item of list">
{{ item.libelle }}
<ul *ngIf="item.famillies2.length != 0">
<ng-container
*ngTemplateOutlet="recursiveListTmpl; context:{ list: item.famillies2 }"
></ng-container>
</ul>
</li>
</ng-template>

TS

getFamillies() {
this.service
.getFamillies()
.subscribe((data) => {
this.famillies = data;
});
}

结果显示第一个家庭及其第一个孩子，然后家庭2未定义，我应该在第一个家庭中有两个孩子。

Answer 1

递归时，最后一个子级可能没有famillies2属性。换句话说，您必须提供一个条件来停止递归调用。

选项1：短路(&&(

<ul *ngIf="item && item.famillies2 && item.famillies2.length && item.famillies2.length != 0">
<ng-container
*ngTemplateOutlet="recursiveListTmpl; context:{ list: item.famillies2 }"
></ng-container>
</ul>

选项2：安全导航操作员(?.(

<ul *ngIf="item?.famillies2?.length != 0">
<ng-container
*ngTemplateOutlet="recursiveListTmpl; context:{ list: item.famillies2 }"
></ng-container>
</ul>