如果使用 object.value 而不是 object,则角度递归模板列表将变为无限递归
Posted
技术标签:
【中文标题】如果使用 object.value 而不是 object,则角度递归模板列表将变为无限递归【英文标题】:Angular recursive template list turns into infinite recursion if object.value is used instead of object 【发布时间】:2020-10-17 00:16:33 【问题描述】:我想在 Angular 模板中呈现递归列表。
这是component.ts中的data属性:
data = [
type: "TEXT",
key: "text_key_1",
value: "text_value_1",
,
type: "INTEGER",
key: "int_key_1",
value: 42,
,
type: "ARRAY",
key: "array_key_1",
value: [
type: "TEXT",
key: "text_key_2",
value: "text_value_2",
,
type: "TEXT",
key: "text_key_3",
value: "text_value_3",
,
]
]
这就是我的模板的样子:
<ul>
<ng-template #recursiveList let-data>
<li *ngFor="let item of data">
<ng-container [ngSwitch]="item.type">
<ng-container *ngSwitchCase="'TEXT'">item.key: item.value</ng-container>
<ng-container *ngSwitchCase="'INTEGER'">item.key: item.value</ng-container>
<ng-container *ngSwitchCase="'ARRAY'">
item.key:
<ul>
<ng-container *ngTemplateOutlet="recursiveList; context: $implicit: item.value "></ng-container>
</ul>
</ng-container>
</ng-container>
</li>
</ng-template>
<ng-container *ngTemplateOutlet="recursiveList; context: $implicit: data "></ng-container>
</ul>
这是最终结果的样子:
问题是data
嵌套在另一个对象mainData
中:
mainData = data: [
type: "TEXT",
key: "text_key_1",
value: "text_value_1",
,
type: "INTEGER",
key: "int_key_1",
value: 42,
,
type: "ARRAY",
key: "array_key_1",
value: [
type: "TEXT",
key: "text_key_2",
value: "text_value_2",
,
type: "TEXT",
key: "text_key_3",
value: "text_value_3",
,
]
]
如果我现在将模板中所有出现的data
更新为mainData.data
(例如let-data
到let-mainData.data
),我会得到一个无限递归。我该如何解决?我认为“。”有问题。我也不确切知道代码是做什么的,因为我从某个地方复制了它。 let-data 和 $implicit 的目的是什么?非常感谢!
【问题讨论】:
【参考方案1】:也许这对你有帮助。
打字稿
data: any[] = mainData.data;
HTML
<ul>
<ul *ngFor="let item of data">
<ng-container [ngTemplateOutlet]="recursiveListTmpl" [ngTemplateOutletContext]=" data: item ">
</ng-container>
</ul>
<ng-template #recursiveList let-data="data">
<li *ngFor="let item of data">
<ng-container [ngSwitch]="item.type">
<ng-container *ngSwitchCase="'TEXT'">item.key: item.value</ng-container>
<ng-container *ngSwitchCase="'INTEGER'">item.key: item.value</ng-container>
<ng-container *ngSwitchCase="'ARRAY'">
item.key:
<ul>
<ng-container *ngTemplateOutlet="recursiveList; context: $implicit: item.value "></ng-container>
</ul>
</ng-container>
</ng-container>
</li>
</ng-template>
</ul>
【讨论】:
以上是关于如果使用 object.value 而不是 object,则角度递归模板列表将变为无限递归的主要内容,如果未能解决你的问题,请参考以下文章
在 python 中加载 JSON 作为实际对象,而不是 dict [重复]
如何在 SceneKit 中使用 OBJ 文件或 CTM 文件而不是 DAE 文件?
C++ 可执行文件是不是包括 .obj、.lib 和 .dll?