将 ngFor 的每个元素都包装在新容器中？答案

【问题标题】：Wrap every element of ngFor inside new container?将 ngFor 的每个元素都包装在新容器中？
【发布时间】：2019-09-30 05:45:48
【问题描述】：

我目前拥有的是具有此模板的父组件：

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

是否有任何已知的解决此问题的方法？

谢谢！

【问题讨论】：

创建一个以数组为输入的组件，显示该数组的第一个元素，然后递归显示自身，将数组的尾部作为输入传递（除非数组只有一个元素，并且因此没有尾巴）。
谢谢！我已经按照你的建议做了，它可以按我的意愿工作。但是现在我必须处理一些性能问题。

标签： angular wrapper ngfor

【解决方案1】：

我没有检查它，但这应该可以工作

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

【讨论】：