Рекурсивный шаблон внутри внутреннего @for в Angular 17
Я пытаюсь создать рекурсивный шаблон и столкнулся с проблемой. Мой шаблон:
<ng-template #recursiveGroups let-groups>
@for (group of groups; track group; let i = $index) {
<!-- Some stuff are shown -->
@for (subGroup of group.subGroups; track subGroup; let j = $index) {
<ng-container *ngTemplateOutlet = "recursiveGroups; context:{$implicit: data[i].subGroups[j]}"></ng-container>
<!-- ALSO, SEPARATLY, TRIED: -->
<ng-container *ngTemplateOutlet = "recursiveGroups; context:{$implicit: subGroup}"></ng-container>
<!-- OR: -->
<ng-container *ngTemplateOutlet = "recursiveGroups; context:{groups: subGroup}"></ng-container>
}
}
</ng-template>
<ng-container *ngTemplateOutlet = "recursiveGroups; context:{$implicit: data}"></ng-container>
Мои данные выглядят так:
data: [
{
...,
children: [
{
...
}
],
subGroups: [
{
...,
children: [
{
...
}
],
subGroups: [
{
...,
}
],
}
],
},
...
]
Использование context:{groups: <*>} показывает только самый верхний уровень.
Использование context:{@implicit: <*>} показывает только самый верхний уровень, а также вызывает ошибку:
core.mjs:6531 ERROR TypeError: newCollection[Symbol.iterator] is not a function
Что мне здесь не хватает? Спасибо.
Было бы здорово, если бы вы предоставили примеры данных. Вы предоставляете data, который является объектом в <ng-container *ngTemplateOutlet = "recursiveGroups; context:{$implicit: data}"></ng-container>, data не повторяется.
@DaksheshBaldaniya, можешь поподробнее? ngif с каким условием? Для чего это?
@YongShun Извините, вы правы, я забыл написать «данные» как массив объектов. Зафиксированный. В любом случае, я вижу, что первый слой состоит из дочерних элементов и метаданных каждой подгруппы, но опять же, только в первом слое.
Ответы 2
Ваш шаблон recursiveGroups ожидает массив, поэтому я не вижу, чтобы вам нужен вложенный @for для subGroups. Шаблон можно повторно использовать для итерации subGroups.
Изменения:
Удалите вложенные
@for.Укажите
group.subGroupsв контексте вложенного<ng-container>.
<ng-template #recursiveGroups let-groups>
@for (group of groups; track group; let i = $index) {
<ng-container *ngTemplateOutlet = "recursiveGroups; context:{ $implicit: group.subGroups }"></ng-container>
}
</ng-template>
Вы запускаете цикл forLoop в верхней части шаблона, поэтому в рекурсии больше циклов for не требуется. Все, что вам нужно сделать, это убедиться, что входные данные для рекурсивного шаблона остаются в виде массива, тогда он будет отображаться правильно:
import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
import 'zone.js';
@Component({
selector: 'app-root',
standalone: true,
imports: [CommonModule],
template: `
<ng-template #recursiveGroups let-groups>
@for (group of groups; track group; let i = $index) {
{{group.id}}
<hr/>
<ng-container *ngTemplateOutlet = "recursiveGroups; context:{$implicit: group.children}"></ng-container>
<hr/>
<ng-container *ngTemplateOutlet = "recursiveGroups; context:{$implicit: group.subGroups}"></ng-container>
}
</ng-template>
<ng-container *ngTemplateOutlet = "recursiveGroups; context:{$implicit: data}"></ng-container>
`,
})
export class App {
name = 'Angular';
data: any = [
{
id: 1,
children: [
{
id: 2,
},
],
subGroups: [
{
id: 3,
children: [
{
id: 4,
},
],
subGroups: [
{
id: 5,
},
],
},
],
},
];
}
bootstrapApplication(App);
Демо-версия Stackblitz
Большое спасибо! Я бы тоже принял этот ответ, но я могу принять только один.
вам просто нужно добавить условие ngIf перед второй группой цикла. Подгруппы