Angular: поведение ngIf с элементом Img при использовании setInterval

Question

У меня есть этот элемент изображения

<img *ngIf="indicator" src="assets/on.gif" width="20px" height="20px">

Теперь при объявлении

indicator:boolean = false;

Так что по умолчанию у меня нет изображения

Теперь у меня есть кнопка, если щелкнуть по ней, он вызовет метод setInterval

setInterval(this.setIndicator, 2000);

 setIndicator() {
    this.indicator = true;
    console.log(this.indicator);
  }

В консоли я вижу значение этого элемента как истинное, но оно не отображает img

Если Я выставил true вручную, это отражает тот img. т.е.

<img *ngIf="true" src="assets/on.gif" width="20px" height="20px">

Answer 1

Вы можете попробовать использовать

setInterval(()=>this.setIndicator(), 2000);

Используя стрелочную функцию (()=>), вы привязываете область действия this к компоненту, а не область внутри setInterval.

this.indicator внутри setInterval не то же самое, что indicator вашего компонента. Это решает функция стрелки.

Эта статья может быть полезна для получения более подробной информации

Answer 2

Я определил код в html как следующий

 <img *ngIf="indicator" src="assests/image.jpg" width="100vw" height="100vh">
 <button class="btn btn-primary" (click)="setIndicator()">Click</button>

, затем в component.ts, я создаю свойство индикатора

indicator:boolean = false

и создаю метод setIndicator ()

setIndicator(){
  setTimeout(() =>{
     this.indicator=true;
  },2000);

код работал так