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作为示例

模板中的条件循环

1 个答案: