递归列表 connat 读取未定义的属性“长度”答案

【问题标题】：Recursive list connat read property 'length' of undefined递归列表 connat 读取未定义的属性“长度”
【发布时间】：2021-05-21 08:09:20
【问题描述】：

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

<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>

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

      });
  }

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

【问题讨论】：

标签： angular ng-template

【解决方案1】：

当它是递归的时候，最后一个孩子可能没有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>

【讨论】：