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>

Answer 2

执行此操作的最佳方法是转换jobs数组的结构，使其成为数组数组。那么你想要的结构很简单：

<ion-row *ngFor='let row of jobRows'>
    <ion-col *ngFor="let job of row">{{ job.name }}</ion-col>                            
</ion-row>

您在哪里进行转换主要取决于您的应用，但您可以在管道中执行此操作：

@Pipe({
    name: 'toRows'
})
export class ToRowsPipe implements PipeTransform {

    transform<T>(value: T[], perRow: number): T[][] {
        let rows: T[][] = [];
        for (let i = 0; i < value.length; i += perRow) {
            rows.push(value.slice(i, i + perRow))
        }
        return rows;
    }

}



<ion-row *ngFor='let row of jobs | toRows:2'>
    <ion-col *ngFor="let job of row">{{ job.name }}</ion-col>                            
</ion-row>

Answer 3

最简单的解决方案是在上面应用* ngFor并根据需要提供size属性。在您的情况下，由于总数为12，因此将为6。因此，将创建两行的行。

<ion-row>
 <ion-col *ngFor="let job of jobs" size="6">
  {{ job.name }}
 </ion-col>                            
</ion-row>

使用* ngFor一次循环列表两

3 个答案: