Angular更新属性后视图不刷新？咨询变更检测失效原因

这个问题我碰到过好多次啦，核心原因是**this的指向不对**！你在setTimeout里用了普通的function回调，这里面的this并不是指向你的组件实例，而是指向setTimeout的执行上下文，所以你修改的根本不是组件的name属性，Angular的变更检测自然不会触发，视图也就不会更新啦。

给你三种解决办法，任选其一都能搞定：

1. 使用箭头函数（最推荐） #

箭头函数会继承外部作用域的this，也就是组件实例，这样就能正确修改组件的name属性：

ngOnInit(){
  this.ls = "dddd"
  setTimeout(() => { 
    this.name = "helllllll" 
  }, 3000);
}

2. 提前保存组件的this引用 #

在setTimeout外面先把组件的this存到一个变量里，比如self，然后在回调里用这个变量访问组件属性：

ngOnInit(){
  this.ls = "dddd"
  const self = this;
  setTimeout(function(){ 
    self.name = "helllllll" 
  }, 3000);
}

3. 用bind绑定this #

把组件的this绑定到回调函数上，强制让回调里的this指向组件实例：

ngOnInit(){
  this.ls = "dddd"
  setTimeout(function(){ 
    this.name = "helllllll" 
  }.bind(this), 3000);
}

只要你用上面任意一种方法，正确修改了组件的name属性，Angular的变更检测机制就会捕捉到这个变化，自动帮你更新视图啦～

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