Angular2 - http调用后视图未更新答案

【问题标题】：Angular2 - view not updated after http callAngular2 - http调用后视图未更新
【发布时间】：2016-03-04 00:30:13
【问题描述】：

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

模板：

<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

【问题讨论】：

尝试将 this.init() 调用从构造函数移动到 ngOnInit()
@Sasxa 我试过了，没有帮助
似乎应该可以工作：plnkr.co/edit/yFGC8fC1HOw6D9xp4hOS?p=preview .
我在这里有几个 http 调用填充列表：syntaxsuccess.com/angular-2-samples/#/demo/http 不确定这是您要查找的内容，但您可以在此处查看代码：github.com/thelgevold/angular-2-samples/blob/master/components/…

标签： angular

【解决方案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;
        });
    });
}

【讨论】：

感谢您的回答，但它并没有解决我的问题，但是我找到了解决方案
这是描述问题的更合适的解决方案。
谢谢！！这刚刚解决了我几天的角度焦虑。

【解决方案2】：

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

【讨论】：

【解决方案3】：

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

【讨论】：

是的，我做到了，看来问题出在我的网络浏览器上，您可以查看我自己的详细答案
这让我想到了这个问题：stackoverflow.com/questions/35409958/angular2-plnkr-error。也许添加 es6-shim 可以解决问题...

【解决方案4】：

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

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

对我来说，它有效。我希望它也适合你

【讨论】：