未定义的递归列表connat read 属性 '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;

      });
  }

结果显示第一个familly和第一个child然后famillies2未定义，我应该在第一个familly中得到2 children。

Answer 1

当它递归时，最后一个 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>

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

Recursive list connat read property 'length' of undefined

ng-template

angular