Question

为什么* ngIf没有更新模板？无论isVisible在2秒后变为false，都会显示标题hello。

@Component({
  selector: 'my-app',

  template: `
    <h1 *ngIf="isVisible == true">{{title}}</h1>
  `
})
export class AppComponent {
  title = 'Hello!';
  isVisible = true;

  constructor() {
    setTimeout(function() {
            this.isVisible = false;
            console.log(this.isVisible);
    }, 2000);
  }
}

Answer 1

使用像这样的匿名函数

setTimeout(function() {
   this.isVisible = false;
}, 2000);

执行上下文（this）指向全局对象（window），但是您希望它是AppComponent实例。在这种情况下，您最好使用保留词法范围的arrow function：

constructor() {
  setTimeout(() => {
     this.isVisible = false;
  }, 2000);
}

您可以使用其他方法，例如使用Function.prototype.bind绑定上下文并保存上下文引用，但在这种情况下，箭头函数是最方便的。

Answer 2

删除== true。

Ngif默认情况下将表达式与true进行比较。

Angular 2 * ng如果没有更新HTML模板

2 个答案: