嵌套 ngFor 在内部循环中使用外部索引答案

【问题标题】：Nested ngFor using outer index in inner loop嵌套 ngFor 在内部循环中使用外部索引
【发布时间】：2021-11-01 04:14:42
【问题描述】：

给定一个元素列表： const l = ["one", "two", "three", "four", "five", "six", "seven"]

我们希望为列表中的每 3 个元素创建 1 行，并且（最多）每行 3 列。在这种情况下，生成的 html 如下所示：

    <div class="row">
        <div class="col"><p>one</p></div>
        <div class="col"><p>two</p></div>
        <div class="col"><p>three</p></div>
    </div>

    <div class="row">
        <div class="col"><p>four</p></div>
        <div class="col"><p>five</p></div>
        <div class="col"><p>six</p></div>
    </div>

    <div class="row">
        <div class="col"><p>seven</p></div>
    </div>

我怎样才能动态地做到这一点？我能看到的唯一方法是嵌套的 ngFor 循环，但似乎没有办法在内部 for 循环中使用外部索引值。怎么可能做到这一点？

类似：

    <div *ngFor="let content of l; index as i">
        <div class="row" *ngIf="i % 3 === 0">
            <div class="col" *ngFor="<!--HOW TO ACCOMPLISH THIS FOR LOOP? j = i; j < i + 3; j++ -->">
                 <p [innerHTML]="l[j]"></p>
            </div>
        </div>
    </div>

【问题讨论】：

你为什么不根据你的要求创建一个嵌套数组并在其中使用嵌套的ngFor

标签： html css angular nested ngfor

【解决方案1】：

你可以这样做：

<ng-container *ngFor="let content of [].constructor(l.length); let item_index = index">
  <div class="row" *ngIf="item_index % 3 === 0">
    <ng-container *ngFor="let item of [0, 1, 2]; let column_index = index">
      <ng-container *ngIf="item+item_index < l.length">
        <div class="col">
          <p [innerHTML]="l[item + item_index]"></p>
        </div>
      </ng-container>
    </ng-container>
  </div>
</ng-container>

Working example

【讨论】：