在实现递归ngFor循环时，空ng-template的上下文数据 [英] Empty context data of ng-template while implementing recursive ngFor loop

问题描述

我必须显示书籍类别的层次树，但在呈现的html中没有任何数据.似乎在ngTemplateOutput上下文中有问题.

I have to show hierarchical tree of book categories but get no data in the rendered html. It seems there is a problem in ngTemplateOutput context.

尝试使用隐式和显式方法设置上下文.明确设定时let-list="list"类别列表的第一级已呈现，但子类别仍未呈现.

Tried setting context with implicit and explicit method. When set explicitly e.g. let-list="list" first level of the categories list was rendered, but child categories still weren't.

角形弯角:5.2.0

Angular vesion: 5.2.0

<div class="categories">
  <div *ngFor="let rootCategory of categories">
    <h1>{{rootCategory.name}}</h1>
    <ul>
      <ng-template #recursiveList let-list>
        <li *ngFor="let subCategory of list">
          <div>{{subCategory.name}}</div>
          <ul *ngIf="subCategory.childCategories.length > 0">
            <ng-container *ngTemplateOutlet="recursiveList; context:{ $implicit: subCategory.childCategories }"></ng-container>
          </ul>
        </li>
      </ng-template>

      <ng-container *ngTemplateOutlet="recursiveList; context:{ $implicit: rootCategory.childCategories }"></ng-container>
    </ul>
  </div>
</div>

输出为:

<div _ngcontent-c5="" class="categories">
        <!--bindings={
  "ng-reflect-ng-for-of": "[object Object],[object Object"
}--><div _ngcontent-c5="">
          <h1 _ngcontent-c5=""></h1>
          <ul _ngcontent-c5="">
            <!---->

            <!--bindings={
  "ng-reflect-ng-template-outlet-context": "[object Object]",
  "ng-reflect-ng-template-outlet": "[object Object]"
}-->
              <!--bindings={
  "ng-reflect-ng-for-of": "[object Object],[object Object"
}--><li _ngcontent-c5="">
                <div _ngcontent-c5=""></div>
                <!---->
              </li><li _ngcontent-c5="">
                <div _ngcontent-c5=""></div>
                <!---->
              </li><li _ngcontent-c5="">
                <div _ngcontent-c5=""></div>
                <!---->
              </li><li _ngcontent-c5="">
                <div _ngcontent-c5=""></div>
                <!---->
              </li><li _ngcontent-c5="">
                <div _ngcontent-c5=""></div>
                <!---->
              </li><li _ngcontent-c5="">
                <div _ngcontent-c5=""></div>
                <!---->
              </li><li _ngcontent-c5="">
                <div _ngcontent-c5=""></div>
                <!---->
              </li><li _ngcontent-c5="">
                <div _ngcontent-c5=""></div>
                <!---->
              </li><li _ngcontent-c5="">
                <div _ngcontent-c5=""></div>
                <!---->
              </li><li _ngcontent-c5="">
                <div _ngcontent-c5=""></div>
                <!---->
              </li>

          </ul>
        </div><div _ngcontent-c5="">
          <h1 _ngcontent-c5=""></h1>
          <ul _ngcontent-c5="">
            <!---->

            <!---->
          </ul>
        </div><div _ngcontent-c5="">
          <h1 _ngcontent-c5=""></h1>
          <ul _ngcontent-c5="">
            <!---->

            <!---->
          </ul>
        </div><div _ngcontent-c5="">
          <h1 _ngcontent-c5=""></h1>
          <ul _ngcontent-c5="">
            <!---->

            <!---->
          </ul>
        </div><div _ngcontent-c5="">
          <h1 _ngcontent-c5=""></h1>
          <ul _ngcontent-c5="">
            <!---->

            <!---->
          </ul>
        </div>
      </div>

未显示类别数据.此外，控制台在此行出现错误:

No categories data is shown. Also, an error from the console on this line:

<ul *ngIf="list.childCategories.length > 0">

错误:

ERROR TypeError: Cannot read property 'length' of undefined
    at Object.eval [as updateDirectives]

简化的类别数组:

categories: Category[] = [
    {
      name: 'Category 1',
      childCategories: [
        {
          name: 'Category 1.1',
          childCategories: [
            {
              name: 'Category 1.1.1',
              childCategories: [],
            },
            {
              name: 'Category 1.1.2',
              childCategories: [],
            },
            {
              name: 'Category 1.1.3',
              childCategories: [],
            },
          ],
        },
      ]
    },
  ];

推荐答案

添加?喜欢

*ngIf="list.childCategories?.length > 0"

防止错误.当list.childCategories为null时，此表达式返回null，而不是抛出length在null(安全导航或Elvis运算符)上不可用

prevents the error. This expression returns null when list.childCategories is null, instead of throwing that length is not available on null (safe-natigation or Elvis operator)

我认为

<ng-container *ngTemplateOutlet="recursiveList; context:{ $implicit: list.childCategories }"></ng-container>

应该是

<ng-container *ngTemplateOutlet="recursiveList; context:{ $implicit: subCategory.childCategories }"></ng-container>

subCategory而不是list

StackBlitz示例

这篇关于在实现递归ngFor循环时，空ng-template的上下文数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！