HTTP 调用后 Angular 2 视图未更新答案

【问题标题】：Angular 2 view not updated after HTTP callHTTP 调用后 Angular 2 视图未更新
【发布时间】：2017-08-28 07:04:39
【问题描述】：

我正在尝试使用 Angular 2，并尝试使用内置 HTTP 服务进行 http 请求：

@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']);
    }
}

用法如下：

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

    constructor(private myService: MyService) {
    }

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

如果我使用zone 来运行数据分配，那么它会按预期工作，但是我觉得它有点hacky，我真的不明白为什么它不起作用。

我读到代码可能会在角度区域之外运行，但我不明白为什么，因为我只使用内置功能。

视图绑定：

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

你能帮忙吗？

谢谢！

【问题讨论】：

您的视图绑定是什么样的。我也看不出为什么你需要 zone.run(...) 这个例子。
我也不是，这就是为什么我不明白为什么它不起作用。我已经添加了视图绑定。
添加<div>{{content | json}}</div>会得到什么？
很遗憾，它没有任何影响。
这意味着this.content = data 没有赋值。

标签： javascript angular zone.js

【解决方案1】：

原来问题既不是 webpack 也不是我的代码，而是我使用的 3rd 方代码。

我基于this answer 实现了 Google 登录，正如您所见，它使用了本机 JS 处理程序——我认为这是导致问题的原因。如果我将该代码放入 zone.run，那么一切正常。我认为原因是处理程序在区域上下文之外运行，这就是视图没有更新的原因。

【讨论】：