使用* ngFor一次遍历列表二 | ngFor一次遍历列表二

本文介绍了使用* ngFor一次遍历列表二的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

I have a list of jobs that I want to display within <ion-row>. Each row can contain a maximum of two jobs. Each job is wrapped within a <ion-col> tag.

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

我需要能够遍历所有工作:

I need to be able to loop through the jobs:

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

但是，这样做的问题是所有作业都显示在同一<ion-row>标记内.

But the problem with this is that all the jobs show within the same <ion-row> tag.

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

Instead I need something like this pseudo code:

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

我该如何实现?大概是利用奇数/偶数?

How can I achieve this? Presumably making use of odd/even numbers?

推荐答案

创建执行拆分的管道:

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

这篇关于使用* ngFor一次遍历列表二的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！