[英]ionic 2 infinite scroll error
I'm trying to do infinite scroll in ionic2 but whenever the page loads i get this error Cannot read property 'complete' of undefined
我正在尝试在ionic2中进行无限滚动,但是每当页面加载时,我都会收到此错误
Cannot read property 'complete' of undefined
HTML HTML
<ion-content>
<ion-list>
<ion-item *ngFor="let item of posts" (click)="passurl($event,item)">
<h2>{{item.title}}</h2>
</ion-item>
</ion-list>
<ion-infinite-scroll (ionInfinite)="ionViewDidLoad($event)">
<ion-infinite-scroll-content></ion-infinite-scroll-content>
</ion-infinite-scroll>
</ion-content>
JS JS
ionViewDidLoad(infiniteScroll){
let loader = this.LoadingController.create({
content: 'Please Wait'
});
loader.present().then(()=>{
this.http.get('http://mynewweb/templates/messages/titles.php?church_id='+ this.church_id+'&msg_type='+this.NavParams.data.id+ "&page="+this.page).map(res => res.json()).subscribe(data =>{
console.log(JSON.stringify(data));
setTimeout(() => {
for(var i=0;i<data.length;i++){
this.numofposts = data.length;
this.posts.push(data[i]);
}
infiniteScroll.complete();
}, 500);
});
this.page=this.page+1;
loader.dismiss();
});
}
i followed the documentation on the ionic2 framework from their website. 我遵循了他们网站上ionic2框架上的文档。 any help with this?
有什么帮助吗? thanks
谢谢
You cannot use the ionViewDidLoad
hook as the target of the InfiniteScroll . 您不能将
ionViewDidLoad
挂钩用作InfiniteScroll的目标。 You can put the same logic in a different method, like this: 您可以将相同的逻辑放入不同的方法中,如下所示:
<ion-infinite-scroll *ngIf="!hideInfinite" (ionInfinite)="loadData($event)">
<ion-infinite-scroll-content></ion-infinite-scroll-content>
</ion-infinite-scroll>
And in the component code: 并在组件代码中:
public hideInfinite: boolean;
public loadData(infiniteScroll?: any): void {
let loader = this.LoadingController.create({
content: 'Please Wait'
});
loader.present().then(()=>{
this.http.get('http://mynewweb/templates/messages/titles.php?church_id='+ this.church_id+'&msg_type='+this.NavParams.data.id+ "&page="+this.page).map(res => res.json()).subscribe(
data => {
console.log(JSON.stringify(data));
if(!data || !data[0]) {
// Hide the infiniteScroll if there's no more data
this.hideInfinite = true;
}
setTimeout(() => {
for(var i=0;i<data.length;i++) {
this.numofposts = data.length;
this.posts.push(data[i]);
}
// Check if it's not null/undefined before calling the complete method
if(infiniteScroll) {
infiniteScroll.complete();
}
}, 500);
});
this.page=this.page+1;
loader.dismiss();
});
}
If you want to use the same logic in the ionViewDidLoad
lifecycle hook, you could call the same method: 如果要在
ionViewDidLoad
生命周期挂钩中使用相同的逻辑,则可以调用相同的方法:
ionViewDidLoad(){
// You can now call the method without sending anything,
// since in the code we check if the infiniteScroll is defined
// before using its methods
this.loadData();
}
old ionic need to write like this 旧的离子需要这样写
$event.state = "closed";
new version ionic need to write like this 新版本ionic需要这样写
infiniteScrollEvent.complete();
(or) (要么)
infiniteScrollEvent.target.complete();
ionViewDidLoad(infiniteScroll) { ionViewDidLoad(infiniteScroll){
this.http.get('http://mynewweb/templates/messages/titles.php?church_id=' + this.church_id + '&msg_type=' + this.NavParams.data.id + "&page=" + this.page).map(res => res.json()).subscribe(data => {
console.log(JSON.stringify(data));
if (infiniteScroll) {
infiniteScroll.complete();
}
});
this.page = this.page + 1;
} }
public play=true;
public loadData(infiniteScroll?: any): void {
let loader = this.LoadingController.create({
content: 'Please Wait'
});
loader.present().then(()=>{
this.http.get('http://mynewweb/templates/messages/titles.php?church_id='+ this.church_id+'&msg_type='+this.NavParams.data.id+ "&page="+this.page).map(res => res.json()).subscribe(
data => {
this.numofposts=this.numofposts+data.length;
this.itemsdisplayed = this.itemsdisplayed + 10;
if(this.itemsdisplayed > this.numofposts) {
// Hide the infiniteScroll if there's no more data
this.play = false;
}
setTimeout(() => {
for(var i=0;i<data.length;i++) {
this.numofposts = data.length;
this.posts.push(data[i]);
}
// Check if it's not null/undefined before calling the complete method
if(infiniteScroll) {
infiniteScroll.complete();
}
}, 500);
});
this.page=this.page+1;
loader.dismiss();
});
}
HTML HTML
<ion-infinite-scroll *ngIf="play" (ionInfinite)="loadData($event)">
<ion-infinite-scroll-content></ion-infinite-scroll-content>
</ion-infinite-scroll>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.