使用*ngFor一次循环列表两

Question

我有一个我想要显示的工作列表<ion-row>.每行最多可包含两个作业.每个作业都包含在<ion-col>标签中.

<ion-row>
    <ion-col width-50 class="job-item">Job A</ion-col>
    <ion-col width-50 class="job-item">Job B</ion-col>                              
</ion-row>  

我需要能够遍历这些工作:

<ion-row>
    <ion-col *ngFor="let job of jobs" width-50 class="job-item">{{ job.name }}</ion-col>                            
</ion-row>  

但问题是所有工作都显示在同一个<ion-row>标签内.

相反,我需要像这样的伪代码:

<ion-row>
    <ion-col>1</ion-col>
    <ion-col>2</ion-col>
</ion-row>  
<ion-row>
    <ion-col>3</ion-col>
    <ion-col>4</ion-col>
</ion-row>  
<ion-row>
    <ion-col>5</ion-col>
    <ion-col>6</ion-col>
</ion-row>  
<ion-row>
    <ion-col>7</ion-col>
</ion-row>      

我怎样才能做到这一点？想必使用奇数/偶数？

Answer 1

创建一个执行拆分的管道:

@Pipe({ name: "row" })
export class RowPipe implements PipeTransform {
  // input is an array of any
  // mod is the modulo, every mod items, create a row
  transform(input: any[], mod: number): any[][] {
    return input.reduce((previous, next, index) => {
      if (index % mod === 0)
        previous.push([next]);
      else
        previous[previous.length - 1].push(next);
      return previous;
    }, <any[][]>[]);
  }
}

然后 :

<ion-row *ngFor="row of jobs|row:2">
    <ion-col *ngFor="let job of row" width-50 class="job-item">{{ job.name }}</ion-col>                            
</ion-row>