Angular中Observable Next函数更新视图不生效问题咨询

嘿，我一眼就揪出问题所在了——你在subscribe的回调里用了new function()写法，这直接搞乱了this的指向，导致组件变量没被正确更新！

问题根源 #

当你用普通函数（尤其是new function()这种方式）作为回调时，函数内部的this会指向这个函数自身的上下文，而不是你的Angular组件实例。所以你在里面给this.enquiryCount赋值，根本没修改到组件里的那个变量——控制台能输出结果是因为API请求确实成功了，但组件的变量压根没变化，视图自然不会跟着更新。

修复方案 #

最简洁好用的办法就是用箭头函数代替普通函数，箭头函数会自动继承外部上下文的this，也就是你的组件实例：

enquiryCount: number = 0; // 建议给个初始值，避免视图显示undefined

ngOnInit() {
  this.enquiryService.getEnquiries().subscribe(n => {
    this.enquiryCount = n; // 这里的this现在指向组件实例了
    console.log(n); // 正常打印的同时，组件变量也会同步更新
  });
}

如果你非要用普通函数（不太推荐哈），也可以提前把组件的this存起来：

ngOnInit() {
  const componentThis = this; // 把组件的this存到变量里
  this.enquiryService.getEnquiries().subscribe(function(n) {
    componentThis.enquiryCount = n; // 用保存的变量访问组件属性
  });
}

或者给普通函数绑定组件的this：

ngOnInit() {
  this.enquiryService.getEnquiries().subscribe(function(n) {
    this.enquiryCount = n;
  }.bind(this)); // 强制把组件的this绑定给这个函数
}

改完之后，API返回的数据就能正确赋值到组件的enquiryCount上，视图也会自动同步更新啦！

内容的提问来源于stack exchange，提问作者Jamlow