グリッドイオンフレームワークのロードWeb APIデータでの問題

Question

イオンで新しい、グリッドイオンでウェブAPIデータをロードしたいので、以下は私のコードです。

grid.html

<ion-header> 
<ion-navbar> 
    <button ion-button menuToggle> 
     <ion-icon name="menu"></ion-icon> 
     </button> 
    <ion-title>Grid Demo</ion-title> 
    </ion-navbar> 
</ion-header> 

<ion-content padding> 

<ion-refresher (ionRefresh)="doRefresh($event)"> 
    <ion-refresher-content></ion-refresher-content> 
    </ion-refresher> 


<ion-grid> 
    <ion-row *ngFor="let product of products"> 
    <ion-col width-50 > 
     <h1>{{product.title}}</h1> 
    </ion-col> 

    </ion-row> 
    </ion-grid> 


    <ion-infinite-scroll (ionInfinite)="doInfinite($event)"> 
    <ion-infinite-scroll-content></ion-infinite-scroll-content> 
    </ion-infinite-scroll> 
</ion-content> 

grid.ts

import { Component } from '@angular/core'; 
import { NavController, NavParams, LoadingController } from 'ionic-angular'; 
import { ProductListProvider } from '../../providers/product/product' 


@Component({ 
    templateUrl: 'grid.html', 
    providers:[ProductListProvider] 
}) 

export class GridHttpPage { 
    public response: any; 
    public products: any =[]; 
    public count: any; 
    public loader: any; 
    public page: number = 0; 
    public isLoading: boolean =true; 
    public totalItem: number ; 


    doRefresh(refresher) { 
    console.log('Begin async operation', refresher); 

    setTimeout(() => { 
    this.page=0; 
    this.loadData(true); 
    console.log('Async operation has ended'); 
    refresher.complete(); 
    }, 2000); 
} 

    constructor(public navCtrl: NavController, public navParams: NavParams, public personListProvider: ProductListProvider, public loadingCtrl: LoadingController) { 
this.count = 0; 
this.loadData(this.isLoading); 
    } 

presentLoading() { 
this.loader = this.loadingCtrl.create({ 
    // spinner: 'hide', 
    content: "Please wait...", 
    // duration: 3000, 
    // showBackdrop: true, 
    // enableBackdropDismiss: true, 
    // dismissOnPageChange: true 
    }); 

    this.loader.onDidDismiss(() => { 
    // console.log('Dismissed loading'); 
}); 

this.loader.present(); 
} 

loadData(isLoading) { 


if(isLoading==true) 
{ 
    this.presentLoading(); 
} 


this.page ++; 
this.personListProvider.load(this.page) 
    .then(data => { 
    this.response = data; 
    this.totalItem = this.response.listing.total; 
    //this.products = this.response.listing.data; 
    for (let i = 0; i < this.response.listing.data.length; i++) { 


     this.products.push(this.response.listing.data[i]); 

    // console.log(this.response.listing.data[i]); 
    } 



    if(isLoading==true) 
    { 
     this.loader.dismiss(); 
    } 

    console.log(this.response.listing); 
    console.log(this.products); 
    console.log(this.totalItem); 

    }); 
    } 
    doInfinite(infiniteScroll) { 
console.log('Begin async operation'); 

setTimeout(() => { 
    // for (let i = 0; i < 30; i++) { 
    // this.items.push(this.items.length); 
    // } 
    if(this.products.length <= this.totalItem) 
    { 
    this.loadData(false); 
    } 


    console.log('Async operation has ended'); 
    infiniteScroll.complete(); 
    }, 500); 
} 


} 

私は上記のコードを実行すると、私は、出力の次のタイプを取得し、スクリーンショットを参照してください。

GridView

それは私が2列に表示する単一列のリストを表示するので、私はGridViewのイオンに2列に表示することができますどのように任意のアイデア？

Answer 1

私は

<ion-grid> 
    <ion-row *ngFor="let i of rows"> 
    <ion-col *ngFor="let product of products | slice:(i*2):(i+1)*2" width-50 (click)="openDetailPage(product)"> 
    <ion-card> 
    <ion-avatar item-left> 
    <img src="{{product.medium_image}}" /> 
    </ion-avatar> 
    <ion-card-content> 
    <ion-card-title> 
    <h6>{{product.title}}</h6> 
    <p> <b>Price: </b> {{product.price}}</p> 
    </ion-card-title> 
    </ion-card-content> 
</ion-card> 
    </ion-col> 

    </ion-row> 
</ion-grid> 

を次のようにgrid.tsで

メイクの変更がgrid.html変化

rows: any; 

loadata目的球で

loadData(isLoading) { 


if(isLoading==true) 
{ 
    this.presentLoading(); 
} 


this.page ++; 
this.personListProvider.load(this.page) 
    .then(data => { 
    this.response = data; 
    this.totalItem = this.response.listing.total; 
    for (let i = 0; i < this.response.listing.data.length; i++) { 


     this.products.push(this.response.listing.data[i]); 

    } 
    this.rows = Array.from(Array(Math.ceil(this.products.length/2)).keys()); 



    if(isLoading==true) 
    { 
     this.loader.dismiss(); 
    } 

    console.log(this.response.listing); 
    console.log(this.products); 
    console.log(this.totalItem); 

    }); 
} 

ファイルソリューション

を得ました