如何在Angular 2循环中每行显示两个表列（Angular2相当于PHP的array_chunk） [英] How to display two table columns per row in Angular 2 loop (Angular2 equivalent of PHP's array_chunk)

问题描述

如何使用Angular 2实现以下目标？

How can I achieve the following with Angular 2?

我想显示数据，在我的foreach期间每行两列。我希望我的结果如下所示：

I would like to display data, two columns per row during my foreach. I would like my result to look like the following:

<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>

< a href =https://i.stack.imgur.com/7wUES.png =nofollow noreferrer>

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

Plunker基本理念： https://plnkr.co/edit/LuEYfK?p=preview

Plunker with basic idea: https://plnkr.co/edit/LuEYfK?p=preview

推荐答案

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

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

You can create pipe to get pairs values:

@Pipe({ name: 'pairs' })
export class PairsPipe implements PipeTransform {
  transform(value:any) {
    return value.filter((v,i) => i%2==0).map((v,i) => [value[i*2], value[i*2+1]])
  }
}

将管道添加到模块：

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

并使用* ngFor：

and use in *ngFor:

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

这篇关于如何在Angular 2循环中每行显示两个表列（Angular2相当于PHP的array_chunk）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！