假设我们有以下类:
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>
要实现您的需求,您可以使用嵌套的ng-container
s。
<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
并返回一级对象数组。
你做得差不多,只是一点点修正:
<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>
但对于可能的味道,这看起来很奇怪,太复杂。在渲染之前将该递归类展开为平面数组可能更好吗?