Question

这是我的设置（超简化）：

模板：

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

成分：

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 { }

正如您可能已经注意到的那样，我正在使用button但没有做任何事情，但除非我点击它，否则我的视图不会更新正确的值（花了一些时间来考虑这个hack）。我在这里做了什么，如何用不那么愚蠢的东西取而代之？我发现的所有http样本都向我保证，这应该没有任何魔法，但显然它没有。我正在使用beta6

Answer 1

此问题的简单解决方法是使用NgZone。 NgZone是一种注射服务，用于执行Angular区域内部或外部的工作。因此，它可以用于手动触发变化检测。

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;
        });
    });
}

Answer 2

它确实应该按预期工作，不需要魔法，问题出在我的网页浏览器中（我使用的是Chrome版本48.0.2564.109 m）。我切换到Edge 20.10240.16384.0，现在一切都很好

Answer 3

您确定已将angular2-polyfills.js文件包含在主HTML中吗？此文件包含负责触发视图更新的ZoneJS。

Answer 4

我有一个类似的问题，使用@SaUrAbH MaUrYa提供的解决方法，它有效。但我对此并不满意，所以搜索更多我找到了另一种方式，这似乎更好：

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

对我而言，它有效。我希望它对你有用

Angular2 - http调用后未更新视图

4 个答案: