模板中的条件循环答案

【问题标题】：Conditional loop in template模板中的条件循环
【发布时间】：2023-03-24 02:02:02
【问题描述】：

是否有任何干净的方法可以以如下所述的方式迭代一系列文章？

我有一系列文章，我想按行打印。每行应包含 3 篇文章，因此模板应类似于：

<row>
 <article id=1></article>
 <article id=2></article>
 <article id=3></article>
</row>
<row>
 <article id=4></article>
 <article id=5></article>
 <article id=6></article>
</row>

我现在提出的最简单的解决方案是：

用文章计算数组的长度，除以3，得到行数
创建一个从 0 到计算出的整数的数组
在模板中创建一个 <row></row> 和 ngFor 在整数数组上
在每一行内创建另一个 ngFor，其中包含在外部循环索引和一些时髦条件上使用 ngIf 的文章。

还有其他方法可以在 Angular2 中很好地打印出这种情况吗？

【问题讨论】：

标签： angular angular2-template ngfor

【解决方案1】：

一种解决方案是将数据分块到每一行的数组中，然后使用嵌套的*ngFor 循环对其进行迭代。这可以通过自定义管道来实现：

<row *ngFor="let row of articles | chunk: 3; let i = index">
  <ng-container *ngFor="let article of row; let j = index">
    <article id='(i*3)+j'></article>
  </ng-container>
</row>

chunk 管道既可以使用 lodash _.chunk，也可以原生如下所示：

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'chunk'
})
export class ChunkPipe implements PipeTransform {

  transform(value: any, n: number): any {
      return this.chunk(value, n);
  }

  chunk(arr, n) {
      let newArr = [];
      let nestedArr = [];
      for (let i = 1; i <= arr.length; i++) {
          nestedArr.push(arr[i - 1]);
          if (i % n === 0) {
              newArr.push(nestedArr);
              nestedArr = [];
          }
      }
      if (nestedArr.length > 0) {
          newArr.push(nestedArr);
      }
      return newArr;
  }
}

我创建了一个工作 plunkr 作为示例

【讨论】：