Почему не работает ре-рендериг Angular

Question

Есть переменная и функция. А так же html элемент.

  test = 1;
  countFunc() {
        this.test++;
    }

   <p (click)="countFunc()">{{test}}</p>

При клике на элемент, счетчик увеличивается на 1, и элемент сразу перерендеривается, показывая новое значение. Почему, когда я ставлю счетчик с помощью setInterval, элемент перестает ререндерится при том, что значение test увеличивается.

 ngOnInit(): void {
      setInterval(() => {
          this.test++;
      }, 1000)
    }

Answer 1

Такое поведение возможно, если у вас используется стратегия изменения OnPush

@Component({
   ...
  changeDetection: ChangeDetectionStrategy.OnPush,
})

Есть два варианта, как обновить данные:

Добавить принудительное изменение changeDetection через changeDetectionRef

export class AppComponent {
  test = 1;
  constructor(private ref: ChangeDetectorRef) {}

  ngOnInit(): void {
    setInterval(() => {
      this.test++;

      // добавляем принудительный запуск changeDetection
      this.ref.detectChanges();
    }, 1000);
  }
}

Заменить setInterval на BehaviorSubject и asyncPipe

export class AppComponent {
  private test = 1;
  test$ = new BehaviorSubject(1);

  ngOnInit(): void {
    setInterval(() => {
      this.test++;
      this.test$.next(this.test);
    }, 1000);
  }
}

<p (click)="countFunc()">{{ test$ | async }}</p>

Также советую изучить как работает OnPush и про changeDetectionStrategy

БЛОГ НА HUSL

Почему не работает ре-рендериг Angular

Ответы (1 шт):