Reputation: 3416
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!
Upvotes: 0
Views: 401
Reputation: 3416
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.
Upvotes: 0