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

Question

给定一个元素列表： 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>

Answer 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

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

Nested ngFor using outer index in inner loop

html

css

angular

nested

ngfor