Angular 7, строки таблицы рекурсивных объектов

#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:

Для достижения того, что вам нужно, вы можете использовать вложенные 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>

Но на мой вкус это выглядит странно и слишком сложно. Может быть, лучше просто развернуть этот рекурсивный класс в плоский массив перед рендерингом?