离子3循环列表并分为2列

Question

我正在尝试将列表分成2列，以便在循环时显示列表。我不确定应该怎么做。我已经用索引循环我的列表，但它目前在1个导演中从上到下循环。如何按如下方式循环：

1 7
2 8
3 9
4 10
5 11
6 12

我的代码如下：

<--html-->
            <ion-content padding>
            <ion-row class="heat-row">
              <ion-col *ngFor="let heatUp of heatUps; let i = index">
                <ion-item>
                  {{ heatUp.id }} 
                  <button ion-button large>
                    {{ heatUp.item }}<ion-icon [name]="fireIcon"></ion-icon>
                  </button>
                </ion-item>
              </ion-col>
            </ion-row>
        </ion-content>

打字稿

   <-- ts --> 
        export class QueuePage {
        heatUps: any[];
        fireIcon: string = "flame";

          constructor() {
          }

          // displayHeatUps(heatUp) {
          //   console.log(heatUp.text);
          // }


          ionViewDidLoad() {
            console.log('ionViewDidLoad QueuePage');
            this.heatUps = []
            for(let i = 1; i < 7; i++) {
              this.heatUps.push({
                item: 'Stop',
                id: i
              });
            }
          }
        }

请告知谢谢。

Answer 1

创建一个可循环的ng组件，其中包含一个包含2列的行并循环遍历该列。否则分别制作2列并使用CSS组合它们。

Answer 2

有很多方法可以解决这个问题。

1. 让你的编号去：

1 2

3 4

...

11 12

这是一个简单的循环，离子网格可以轻松处理这种格式，但无法达到你想要的效果。

1. 循环数据中的一半元素（长度/ 2）并将数字放在第一列的循环中，然后元素循环+（长度/ 2）用于第二列，同时移动数据的前半部分

let Size = int( data.length / 2) for (let i=0; i<=int(data.length/2); ++i) { data[i] ... data[i + Size] ...

您需要小心奇数循环，并在尝试访问之前验证您是否可以访问最后一个节点（data [i + Size]）。

1. 像使用其他函数一样使用Typescript将列表拆分为2个列表以循环每列

2. 重新排序当前（或新列表）以对节点1,7,2,8，...，6,12进行排序。