Ionic 3 loop list and divide into 2 columns

问题:

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

My code below:

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

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

please advise thanks.

回答1:

There are many ways to cover this.

1. Have your numbering go:

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.

2. Loop through your data for half of the elements (Length / 2) and put the numbers in column one with the loop, and then elements loop+(Length/2) for the second column while moving through the first half of the data.

let Size = int( data.length / 2) for (let i=0; i<=int(data.length/2); ++i) { data[i] ... 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.

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

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

回答2:

Make an ng-component that is loopable containing a row with 2 columns and loop over that. Otherwise make 2 columns separately and combine them using CSS.