未定义的递归列表connat read 属性 'length'
Recursive list connat read property 'length' of undefined
我正在做一个递归列表,但无法获取整个列表。
<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;
});
}
结果显示第一个familly和第一个child然后famillies2未定义,我应该在第一个familly中得到2 children。
当它递归时,最后一个 child 可能没有 famillies2
属性。换句话说,您必须提供停止递归调用的条件。
选项 1:Short circuit (&&
)
<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>
我正在做一个递归列表,但无法获取整个列表。
<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;
});
}
结果显示第一个familly和第一个child然后famillies2未定义,我应该在第一个familly中得到2 children。
当它递归时,最后一个 child 可能没有 famillies2
属性。换句话说,您必须提供停止递归调用的条件。
选项 1:Short circuit (&&
)
<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>