我有一个我希望在< 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-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>
我怎样才能做到这一点？想必使用奇数/偶数？
解决方法
创建一个执行拆分的管道：
@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>
