在实现递归 ngFor 循环时清空 ng-template 的上下文数据 [英] Empty context data of ng-template while implementing recursive ngFor loop
本文介绍了在实现递归 ngFor 循环时清空 ng-template 的上下文数据的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我必须显示书籍类别的分层树，但在呈现的 html 中没有数据.ngTemplateOutput 上下文中似乎存在问题.
尝试使用隐式和显式方法设置上下文.当明确设置时，例如let-list="list" 类别列表的第一级已呈现，但子类别仍未呈现.
角版本:5.2.0
<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></ng-模板><ng-container *ngTemplateOutlet="recursiveList; context:{ $implicit: rootCategory.childCategories }"></ng-container>输出为:
<!--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": "[对象对象]"}--><!--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><!----></div><div _ngcontent-c5=""><h1 _ngcontent-c5=""></h1><ul _ngcontent-c5=""><!----><!----></div><div _ngcontent-c5=""><h1 _ngcontent-c5=""></h1><ul _ngcontent-c5=""><!----><!----></div><div _ngcontent-c5=""><h1 _ngcontent-c5=""></h1><ul _ngcontent-c5=""><!----><!----></div><div _ngcontent-c5=""><h1 _ngcontent-c5=""></h1><ul _ngcontent-c5=""><!----><!---->未显示类别数据.此外，此行上的控制台错误:
错误:
错误类型错误:无法读取未定义的属性长度"在 Object.eval [作为 updateDirectives]简化的类别数组:
categories: Category[] = [{name: '类别 1',childCategories: [{name: '类别 1.1',childCategories: [{name: '类别 1.1.1',childCategories: [],},{name: '类别 1.1.2',childCategories: [],},{name: '类别 1.1.3',childCategories: [],},],},]},]; 解决方案
添加 ? like
*ngIf="list.childCategories?.length > 0" 防止错误.当 list.childCategories 为 null 时，此表达式返回 null，而不是抛出 length 在 null 上不可用(安全导航或 Elvis 运算符)
我觉得
<ng-container *ngTemplateOutlet="recursiveList; context:{ $implicit: list.childCategories }"></ng-container>应该
<ng-container *ngTemplateOutlet="recursiveList; context:{ $implicit: subCategory.childCategories }"></ng-container>subCategory 而不是 list
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.
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.
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>
The output is:
<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">
The error:
ERROR TypeError: Cannot read property 'length' of undefined
at Object.eval [as updateDirectives]
Simplified categories array:
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: [],
},
],
},
]
},
];
解决方案
Adding ? like
*ngIf="list.childCategories?.length > 0"
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)
I think
<ng-container *ngTemplateOutlet="recursiveList; context:{ $implicit: list.childCategories }"></ng-container>
should be
<ng-container *ngTemplateOutlet="recursiveList; context:{ $implicit: subCategory.childCategories }"></ng-container>
subCategory instead of list
这篇关于在实现递归 ngFor 循环时清空 ng-template 的上下文数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
