Как обновить свойство в угловых?

Question

Я пытаюсь обновить свойство через некоторое время. Но это не reflecting в поле зрения почему?

Вот мой код:

https://stackblitz.com/edit/angular-grjd1u?file=src%2Fapp%2Fhello.component.ts

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

Я пытаюсь обновить свое свойство name через 3 сек., Но оно не обновляется.

Почему обнаружение изменений не работает?

Answer 1

Вам нужно реализовать интерфейс OnChanges, чтобы получить ссылку на имя и внести изменения в var name, эта функция выполняется после ngInit и ngOnChanges, она срабатывает при использовании @Input() decorator демо

ngOnChanges(changes: any): void {
  this.ls = "dddd"
     setTimeout(() => { 
    this.name = "helllllll"
  }, 3000);

}

Answer 2

Использование Наблюдаемое:

// Create observable
const myObservable = new Observable((observer) => {
    setInterval(() => observer.next({ name: 'John Doe', time: new Date().toString() }), 3000);
})

// Subscribe to the observable
myObservable.subscribe((x: any) => {
    this.name = `${x.name}, Time: ${x.time}`;
});

https://stackblitz.com/edit/angular-ce3x4v

Answer 3

Поскольку в вашем обратном вызове для setTimeout, this является объектом Window, а не экземпляром компонента.Это можно исправить с помощью функции со стрелкой, которая связывает this с контекстом, в котором была объявлена ​​функция:

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