将 ngFor 的每个元素包装在新容器中?
Wrap every element of ngFor inside new container?
我目前拥有的是具有此模板的父组件:
<div class="fxcol full-height" [ngStyle]="style">
<ng-container *ngFor="let container of form.Containers; let i=index">
<ev-container class="ev-container " [container]="container" [parentForm]="parentForm" [params]="params"></ev-container>
</ng-container>
</div>
我想要实现的是每个用它包裹的 ev-container 都是由 div 元素组成的下一个兄弟姐妹,如下所示:
<div class="fxcol full-height">
<ev-container class="ev-container"></ev-container>
<div class="fxcol full-height">
<ev-container class="ev-container"></ev-container>
<div class="fxcol full-height">
<ev-container class="ev-container"></ev-container>
</div>
</div>
</div>
这个问题有已知的解决方法吗?
谢谢!
我没检查过,但这应该有用
<ng-container
[ngTemplateOutlet]="tpl"
[ngTemplateOutletContext]="{ index: 0, list: form.Containers }">
</ng-container>
<ng-template #tpl let-index="index" let-list="list">
<div *ngIf="list && list[index]" class="fxcol full-height" [ngStyle]="style">
<ev-container class="ev-container"
[container]="form.Containers[index]"
[parentForm]="parentForm"
[params]="params">
</ev-container>
<ng-container
[ngTemplateOutlet]="tpl"
[ngTemplateOutletContext]="{ index: index + 1, list: list }">
</ng-container>
</div>
</ng-template>
我目前拥有的是具有此模板的父组件:
<div class="fxcol full-height" [ngStyle]="style">
<ng-container *ngFor="let container of form.Containers; let i=index">
<ev-container class="ev-container " [container]="container" [parentForm]="parentForm" [params]="params"></ev-container>
</ng-container>
</div>
我想要实现的是每个用它包裹的 ev-container 都是由 div 元素组成的下一个兄弟姐妹,如下所示:
<div class="fxcol full-height">
<ev-container class="ev-container"></ev-container>
<div class="fxcol full-height">
<ev-container class="ev-container"></ev-container>
<div class="fxcol full-height">
<ev-container class="ev-container"></ev-container>
</div>
</div>
</div>
这个问题有已知的解决方法吗?
谢谢!
我没检查过,但这应该有用
<ng-container
[ngTemplateOutlet]="tpl"
[ngTemplateOutletContext]="{ index: 0, list: form.Containers }">
</ng-container>
<ng-template #tpl let-index="index" let-list="list">
<div *ngIf="list && list[index]" class="fxcol full-height" [ngStyle]="style">
<ev-container class="ev-container"
[container]="form.Containers[index]"
[parentForm]="parentForm"
[params]="params">
</ev-container>
<ng-container
[ngTemplateOutlet]="tpl"
[ngTemplateOutletContext]="{ index: index + 1, list: list }">
</ng-container>
</div>
</ng-template>