#angular #angular7 #angular-template
#угловой #angular7 #angular-шаблон
Вопрос:
Предположим, у нас есть следующий класс:
export class MyClass {
field1: string,
next: MyClass
}
У меня есть таблица, в которой печатается список, MyClass
но внутри каждого элемента может быть next
значение.
<tr *ngFor="let c of _myclasses">
<ng-template #recursive let-current>
<td>{{cur.field1}}</td>
</ng-template>
<ng-container *ngTemplateOutlet="recursive; context {$implicit: c}"></ng-container>
</tr>
Но я как бы застрял здесь, потому что мне нужно создать еще одну tr
или какую-то строку, но я не могу понять, как..
Спасибо.
Пример вывода:
let classes = [];
let class1 = new MyClass();
class1.field1 = 1;
class1.next = new MyClass();
class1.next.field1 = 5;
let class2 = new MyClass();
class2.field1 = 3;
classes.push(class1);
<tr>
<td>1</td>
</tr>
<tr>
<td>5</td>
</tr><tr>
<td>3</td>
</tr>
Комментарии:
1. Не могли бы вы объяснить, чего вы пытаетесь достичь? Также пример _myclasses
2. @Vega добавил пример
Ответ №1:
Для достижения того, что вам нужно, вы можете использовать вложенные ng-container
файлы.
<ng-container *ngFor="let c of _myclasses">
<ng-container *ngTemplateOutlet="recursive; context {$implicit: c}"></ng-container>
</ng-container>
<ng-template #recursive let-current>
<tr>
<td>{{cur.field1}}</td>
</tr>
<ng-container *ngIf="cur.next">
<ng-container *ngTemplateOutlet="recursive; context {$implicit: cur.next}"></ng-container>
</ng-container>
</ng-template>
Или, может быть, вы можете создать, pipe
который принимает _myclasses
и flatten
его рекурсивно и возвращает одноуровневый массив объектов.
Комментарии:
1. Рад помочь 🙂 Но я предлагаю вам поискать решения по выравниванию массива через канал. Так будет намного чище.
2. Я не хочу сглаживать массив. потому что я хочу сохранить ссылки, которые объекты имеют друг на друга. в моем проекте все намного сложнее, чем в этом примере 🙂
3. Нет, я имею в виду использование
pipes
. Они не изменяют ваши фактические данные.
Ответ №2:
Вы сделали почти правильно, просто немного исправили:
<ng-template #recursive let-cur="current">
<ng-template [ngIf]="cur">
<tr>
<td>{{cur.field1}}</td>
</tr>
<ng-container [ngTemplateOutlet]="recursive"
[ngTemplateOutletContext]="{ current: cur.next }">
</ng-container>
</ng-template
</ng-template>
<ng-template ngFor let-item [ngForOf]="_myclasses">
<ng-container [ngTemplateOutlet]="recursive"
[ngTemplateOutletContext]="{ current: item }">
</ng-container>
</ng-template>
Но на мой вкус это выглядит странно и слишком сложно. Может быть, лучше просто развернуть этот рекурсивный класс в плоский массив перед рендерингом?