gpt4 book ai didi

如果使用 object.value 而不是 object,Angular 递归模板列表将变成无限递归

转载 作者:行者123 更新时间:2023-12-05 08:05:59 26 4
gpt4 key购买 nike

我想在 Angular 模板中呈现递归列表。

这是 component.ts 中的数据属性:

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>

最终结果是这样的:

nested list result

问题是 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-datalet -mainData.data), 我得到一个无限递归。我该如何解决?我认为“.”有问题。我也不知道我从某处复制的代码究竟做了什么。 let-data 和 $implicit 的目的是什么?非常感谢!

最佳答案

也许这对你有帮助。

typescript

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,Angular 递归模板列表将变成无限递归,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/62593997/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com