Angular2 / Ionic2 : Execute $http.get within Listener

Question

I am trying to fetch datas on scroll and fill an array of "Article[]".

httpLoadArticles() {
    this.httpWSGetInit().subscribe(
                                   articles => this.articles = articles,
                                    err => {
                                        console.log(err);
                                    },
                    () => console.log('Searching complete')
}

And the current function.

httpWSGetInit() : Observable<Article []> {

    return this.http.get(R.WEBSITE_URL_WS + this.articlesPagination)
                         .map((res:Response) => res.json())
                         .catch((error:any) => Observable.throw(error.json().error || 'Server error'));
}

Works pretty well.

But the http.get method is never called in addScrollListener.

@ViewChild(Content) content: Content;

ionViewDidLoad() {
        this.content.addScrollListener(this.onPageScroll);
}

onPageScroll(event) {
       this.httpLoadArticles()
}

I tried to set the GET as synchronous but it seems to not change anything. Is it a scope issue ? Like addScrollListener is a pure JS method and cannot be attached to angular2 container ?

Pankaj Parkar · Accepted Answer · 2016-11-21 21:25:48Z

3

Yes its an scope issue. You should use Arrow function to preserve this context

ionViewDidLoad() {
    this.content.addScrollListener(() => this.onPageScroll() );
}

answered Nov 21, 2016 at 21:25

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Alexsoyes Over a year ago

Thank you, it works like a charm :). Do you have any documentation on it ?

Collectives™ on Stack Overflow

Angular2 / Ionic2 : Execute $http.get within Listener

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related