Angular2 - view not updated after http call

Question

Here is my setup (super simplified):

template:

<button (click)="doNothing">Show</button>
<h2>{{count}}</h2>

component:

count: number;
constructor(private _dataService: DataService) {
    this.init();      
}

private init(): void {
    this._dataService.getAll().subscribe(res=> { //just a simple http GET here
        this.count = res;
        console.log(this.count); //logs the correct value, but view not updated
    });
}        

private doNothing(): void { }

As you may have noticed, I'm using a button that's not doing anything, but unless I click it my view is not updated with the correct value (took me some time to think of this hack). What am I actually doing here and how can I replace it with something not so dumb? All the http samples I found assured me that this should work without any magic, but apparently it doesn't. I'm using beta6

Try moving this.init() call from constructor to ngOnInit() — Sasxa
– Sasxa, Commented Feb 15, 2016 at 23:15
Seems like it should be working: plnkr.co/edit/yFGC8fC1HOw6D9xp4hOS?p=preview . — Michael Kang
– Michael Kang, Commented Feb 15, 2016 at 23:40
I have a few http calls populating lists here: syntaxsuccess.com/angular-2-samples/#/demo/http Not sure this is what you are looking for, but you can see the code here:github.com/thelgevold/angular-2-samples/blob/master/components/… — TGH
– TGH, Commented Feb 17, 2016 at 3:38

Saurabh Maurya · Accepted Answer · 2016-02-16 04:46:18Z

3

Simple workaround for this problem can be to use NgZone. NgZone is an injectable service for executing work inside or outside of the Angular zone. So, it can be used to trigger the change detection manually.

import {NgZone} from 'angular2/core';
count: number;
private zone: NgZone;
constructor(private _dataService: DataService) {
    this.zone = new NgZone({ enableLongStackTrace: false });
    this.init();      
}

private init(): void {
    this._dataService.getAll().subscribe(res=> { //just a simple http GET here
        this.zone.run(() => {
            this.count = res;
        });
    });
}

answered Feb 16, 2016 at 4:46

Saurabh Maurya

1,6382 gold badges13 silver badges11 bronze badges

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

3 Comments

Oleg Golovkov Over a year ago

thanks for your answer, but it didn't solve my problem, I found a solution however

nashcheez Over a year ago

This is a more appropriate solution to the described problem.

Bud Over a year ago

Thank you!! This has just solved days of angular-angst for me.

Oleg Golovkov · Accepted Answer · 2016-02-16 08:07:46Z

1

It should indeed work as expected, no magic required, the problem was in my web browser (I was using Chrome Version 48.0.2564.109 m). I switched to Edge 20.10240.16384.0 and everything is fine now

answered Feb 16, 2016 at 8:07

Oleg Golovkov

7061 gold badge5 silver badges18 bronze badges

Comments

Thierry Templier · Accepted Answer · 2016-02-16 08:13:12Z

0

Are you sure to have included the angular2-polyfills.js file into your main HTML? This file contains ZoneJS that is responsible from triggering view updates.

answered Feb 16, 2016 at 8:13

Thierry Templier

203k44 gold badges407 silver badges366 bronze badges

2 Comments

Oleg Golovkov Over a year ago

yes, I did, looks like the problem was with my web browser, you can see my own answer with details

Thierry Templier Over a year ago

This makes me think about this question: stackoverflow.com/questions/35409958/angular2-plnkr-error. Perhaps adding es6-shim would fix the problem...

maufarinelli · Accepted Answer · 2016-03-03 16:30:13Z

0

I had a similiar problem and using the workaround provided by @SaUrAbH MaUrYa it worked. But I was not satified with this, so searching more I found another way, that seems better:

ngOnInit() {
    this._dataService.getAll().subscribe(res=> this.count = res);}

For me, It works. I hope it works for you either

answered Mar 3, 2016 at 16:30

maufarinelli

3033 silver badges7 bronze badges

Collectives™ on Stack Overflow

Angular2 - view not updated after http call

4 Answers 4

3 Comments

Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related