각도 2 * ng HTML 템플릿을 업데이트하지 않는 경우

Question

* ng가 템플릿을 업데이트하지 않는 이유는 무엇입니까? hello라는 제목은 2 초 후에 isVisible이 false로 변경된다는 사실과 관계없이 항상 표시됩니다. 이 하나

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

실행 컨텍스트 (this)와 같은 익명 함수와

@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

그러나 당신이 AppComponent 인스턴스가 원하는, 전역 객체 (window)를 가리키고 있습니다. 이 경우 당신은 더 나은 어휘 범위를 유지하는 arrow function을 사용합니다 :

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

이 같은 Function.prototype.bind와 컨텍스트를 바인딩 및 컨텍스트 참조를 저장하는 등 당신이 사용할 수있는 다른 방법이 있지만, 화살표 기능이 경우에 가장 편리 .

Answer 2

== true를 제거하십시오.

Ngif는 기본적으로 표현식을 true와 비교합니다.