离子3循环列表并分为2列 [英] Ionic 3 loop list and divide into 2 columns

问题描述

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

I'm trying to divide the list into 2 column to display a list when loop. I'm not sure how it should be done. I have already loop my list with a index but it is currently looping in a way from top to bottom in 1 director. How do I loop it like this as below:

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>

Typescript

Typescript

   <-- 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
              });
            }
          }
        }

请告知谢谢。

推荐答案

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

There are many ways to cover this.

1. 你的编号是：

1 2

3 4

...

11 12

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

This is then a simple loop and Ionic grid can handle this format easily, but does not achieve what you are looking for.

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

让size = int（data.length / 2）
for（let i = 0 ; i< = int（data.length / 2）; ++ i）{
data [i] ...
data [i + Size] ...


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

You do need to be careful for odd number loops and validate that you can access the last node (data[i + Size]) before attempting to access it.

1. 使用Typescript就像你正在使用一个额外的函数来将列表拆分为2个列表以循环每列

1. Use Typescript like you were doing with an additional function to to split the list into 2 lists to loop for each column

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

Re-Order the current (or a new list) to sort the nodes 1, 7, 2, 8, ..., 6, 12.

这篇关于离子3循环列表并分为2列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！