Angular7、递归对象table行

Question

假设我们有以下 class：

export class MyClass {
    field1: string,
    next: MyClass
}

我有一个 table 打印 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>

Answer 1

要实现您的需要，您可以使用嵌套 ng-containers。

 <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 以及 returns 一个对象的一级数组。

Answer 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>

但是对于可能的口味来说，这看起来很奇怪而且太复杂了。在渲染之前将递归 class 展开到平面数组可能更好？

Angular7、递归对象table行

Angular 7, recursive object table rows

angular-template

angular

angular7