如何在Angular 2循环中每行显示两个表列(Angular2相当于PHP的array_chunk)

Question

如何使用Angular 2实现以下功能？

我希望显示数据,在我的foreach期间每行两列.我希望我的结果如下所示:

<table>
<tr><td>VALUE1</td><td>VALUE2</td></tr>
<tr><td>VALUE3</td><td>VALUE4</td></tr>
<tr><td>VALUE5</td><td>VALUE6</td></tr>
</table>

类似的问题:如何在php循环中每行显示两个表列

有基本想法的Plunker:https://plnkr.co/edit/LuEYfK？p = preview

Answer 1

https://plnkr.co/edit/umL80bh0WKr8aPEueCxZ?p=preview

您可以创建管道以获取对值:

@Pipe({ name: 'pairs' })
export class PairsPipe implements PipeTransform {
  transform(array) {
    return array.reduce((result, item, index) => (
      index % 2 ? result : [...result, [item, array[index + 1]]]
    ), []);
  }
}

将管道添加到模块:

@NgModule({
  imports: [ BrowserModule ],
  declarations: [ App , PairsPipe],
  bootstrap: [ App ]
})

并在*ngFor中使用:

 <tr *ngFor="let item of data | pairs">