模板中的条件循环

Question

是否有任何干净的方法可以按照下面描述的方式迭代一系列文章？

我有一系列文章要按行打印。每行应包含 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 中很好地打印出这种情况？

Answer 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 作为例子

模板中的条件循环

Conditional loop in template

angular2-template

ngfor

angular