Angular 2 view not updated after HTTP call

Question

I'm experimenting with Angular 2 and I'm trying to do an http request with the built-in HTTP service:

@Injectable()
export class MyService {
    constructor(private http: Http) {
    }

    public get(): Observable<string[]> {
        return this.http.get('http://localhost:8080/endpoint')
               .map((data) => <string[]>data.json()['content']);
    }
}

Usage is the following:

export class MyComponent implements OnInit {
    public content: string[];

    constructor(private myService: MyService) {
    }

    public ngOnInit(): void {
        this.myService.get().subscribe((data) => {
            this.content = data;
        });
    }
}

If I use zone to run the data assignment, then it works as expected, however I feel that it's a bit hacky and I don't really understand why it is not working.

I read that the code might run outside of angular zone but I don't understand why as I'm only using built-in features.

View binding:

<div *ngFor="let str of content">
    {{ str }}
</div>

Could you please help?

Thanks!

What is your view binding look like. I also don't see a reason why you would need `zone.run(...)` for this example. — Günter Zöchbauer, Apr 03 '17 at 12:30
Me neither, that's why I don't understand why it is not working. I've added the view binding. — Arnold Galovics, Apr 03 '17 at 12:54
This means that `this.content = data` doesn't assign any value. — Günter Zöchbauer, Apr 03 '17 at 13:03
Actually it does. If I do the following: `log(this.content); this.content = data; log(this.content)` then I see it goes from undefined to the object itself. — Arnold Galovics, Apr 03 '17 at 13:14
Please try to reproduce in a Plunker. The code you posted doesn't contain the cause of the problem. — Günter Zöchbauer, Apr 03 '17 at 13:16
Somehow it is working in a Plunker example. Might it be related to webpack configuration? — Arnold Galovics, Apr 03 '17 at 14:33
would you please provide webpack config? but it realy strange if it is related to webpack — Mahmood Sajjadi, Apr 25 '17 at 01:11

score 0 · Accepted Answer · edited May 23 '17 at 12:09

Turned out that the problem was neither webpack nor my code but the 3rd party code I used.

I implemented Google login based on this answer and as you can see it uses a native JS handler - which I think caused the problem. If I put that code into zone.run, then everything works properly. I think the reason is that the handler ran outside of the zone context and that's why the view was not updated.

Angular 2 view not updated after HTTP call

1 Answers1