Обернуть каждый элемент ngFor внутри нового контейнера? - PullRequest
Новая
       8

Обернуть каждый элемент ngFor внутри нового контейнера?

0 голосов
/ 13 мая 2019

В настоящее время у меня есть родительский компонент, который имеет этот шаблон: 

<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-контейнер был обернут следующим элементом sibiling с помощью элемента 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>

Есть ли какой-нибудь известный способ решения этой проблемы?

Спасибо!

1 Ответ

0 голосов
/ 13 мая 2019

Я не проверял, но это должно работать 

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