angular – 使用* ngFor一次循环列表两个

发布时间：2020-12-17 06:53:47 所属栏目：安全来源：网络整理

导读：我有一个我希望在 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-ro

我有一个我希望在< 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>

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

解决方法

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

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!