Question

假设我有一个像以下

这样的元素列表

items = ['AAA','BBB','CCC','DDD','EEE','FFF'];

我要做的是将每个2个元素包装在内部包装div标签中。

预期产出：

<div class="outer-wrap">
  <div class="inner-wrap">
    <p>AAA</p>
    <p>BBB</p>
  </div>
  <div class="inner-wrap">
    <p>CCC</p>
    <p>DDD</p>
  </div>
  <div class="inner-wrap">
    <p>EEE</p>
    <p>FFF</p>
  </div>
</dvi>

这在ngFor循环中是否可行？

Answer 1

您可以在模板中使用%（模数）将数组拆分为*ngFor。

Here is an working example

所以你可以在模板中这样做：

<div class="outer-wrap">
  <ng-container *ngFor="let item of testArray; let i = index;">
    <div class="inner-wrap" *ngIf="(i+1) % 2 !== 1">
      <p>{{ testArray[i-1] }}</p>
      <p>{{ item }}</p>
    </div>
  </ng-container>
</div>

这是我的testArray：

testArray: string[] = ['AAA', 'BBB', 'CCC', 'DDD', 'EEE', 'FFF'];

如何在ngFor循环中包装元素？

1 个答案: