实现递归 ngFor 循环时清空 ng-template 的上下文数据
Empty context data of ng-template while implementing recursive ngFor loop
我必须显示图书类别的层次结构树,但在呈现的 html 中没有数据。 ngTemplateOutput
上下文似乎有问题。
尝试使用隐式和显式方法设置上下文。明确设置时,例如let-list="list"
已呈现类别列表的第一级,但仍未呈现子类别。
Angular 版本: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>
未显示类别数据。此外,此行的控制台错误:
<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 时,此表达式 returns null,而不是抛出 length
在 null
上不可用(safe-natigation 或 Elvis 运算符)
我觉得
<ng-container *ngTemplateOutlet="recursiveList; context:{ $implicit: list.childCategories }"></ng-container>
应该是
<ng-container *ngTemplateOutlet="recursiveList; context:{ $implicit: subCategory.childCategories }"></ng-container>
subCategory
而不是 list
我必须显示图书类别的层次结构树,但在呈现的 html 中没有数据。 ngTemplateOutput
上下文似乎有问题。
尝试使用隐式和显式方法设置上下文。明确设置时,例如let-list="list"
已呈现类别列表的第一级,但仍未呈现子类别。
Angular 版本: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>
未显示类别数据。此外,此行的控制台错误:
<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 时,此表达式 returns null,而不是抛出 length
在 null
上不可用(safe-natigation 或 Elvis 运算符)
我觉得
<ng-container *ngTemplateOutlet="recursiveList; context:{ $implicit: list.childCategories }"></ng-container>
应该是
<ng-container *ngTemplateOutlet="recursiveList; context:{ $implicit: subCategory.childCategories }"></ng-container>
subCategory
而不是 list