2017-07-20 11 views
0

リストを作成したいときにリストの一番下に来たら、項目が表示されます。私はion-infinite-scrollディレクティブを使用しています。しかし私は私のリストに名前(文字列)をプッシュできません。私のリストは、教室内のすべての生徒の名前です。 ここに私のコードです。私のリストの文字列をプッシュする方法とcomplete()メソッドを呼び出す方法を教えてくださいできますか?InfiniteScrollを使用してイオンリストの項目としてプッシュ文字列を入力

.htmlを

  <h2>{{item.name}}</h2> 
     </ion-item> 
    </ion-list> 
    <ion-infinite-scroll (ionInfinite)="loadMore($scope)"> 
     <ion-infinite-scroll-content> 
     </ion-infinite-scroll-content> 
    </ion-infinite-scroll> 

.TS

export class NotificationsPage { 
i: number; 
items: any = []; 
name: any; 
InfiniteScroll: any; 
constructor(public navCtrl: NavController, public navParams: NavParams) { 
    for (let i = 0; i < 10; i++) { 
     let item = { 
      name:i, 
     }; 
     this.items.push(item); 
    } 

    this.InfiniteScroll.complete() 


} 
loadMore(InfiniteScroll: any) { 
    this.objects.items.push({this.items}); 

}; 

ionViewDidLoad() { 
    console.log('ionViewDidLoad NotificationsPage'); 
}; 

}

+0

あなたが何をしたいですか? $スコープはここでひどく見えます。いくつかの作業コードを追加します –

+0

私はネット上の参照を取ってみましたが、できませんでした。 plzはこれで私を助けます。 @SwapnilPatwa – ND16

+0

これは機能しますか? –

答えて

0

これはplunker

作業way-ください

HTML

<ion-content padding> 
    <ion-list *ngFor="let item of items"> 
     <h2>{{item?.name}}</h2> 
    </ion-list> 
    <ion-infinite-scroll (ionInfinite)="loadMore($event)"> 
     <ion-infinite-scroll-content> 
     </ion-infinite-scroll-content> 
    </ion-infinite-scroll> 
</ion-content> 

TS:

import { Component } from '@angular/core'; 
import { NavController } from 'ionic-angular'; 

@Component({ 
    selector: 'page-home', 
    templateUrl: 'app/home.page.html' 
}) 
export class HomePage { 
    items: any = []; 
    constructor(public navCtrl: NavController) {} 
    load() { 
     for (let i = 0; i < 10; i++) { 
      let item = { 
       name: i, 
      }; 
      this.items.push(item); 
     } 
    } 
    loadMore(InfiniteScroll: any) { 

     this.load(); 
     InfiniteScroll.complete(); 
    }; 

    ionViewDidLoad() { 
     this.load(); 
    }; 
} 
関連する問題