Angular 2 * ngIf не обновлять HTML-шаблон

Question

Почему * ngIf не обновляет шаблон? Звание приветствуется всегда, независимо от того, что isVisible изменяется на false через 2 секунды.

@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 сравнивает по умолчанию выражение с истинным.