Часы обратного отсчета в Angular html не обновляются?

Question

Кто-нибудь знает, почему мои переменные не отображаются на моей странице? Я создаю таймер обратного отсчета, и переменные обновляются, но не отображаются на моей странице. Не совсем уверен, в чем проблема. Это консоль, регистрирующая дни каждую секунду, как и должна, но она не отображается на моем сайте, когда у меня {{days}}

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-fireworks',
  templateUrl: './fireworks.component.html',
  styleUrls: ['./fireworks.component.scss']
})
export class FireworksComponent implements OnInit {
  public days;
  public hours;
  public minutes;
  public seconds;
  constructor() { }

  ngOnInit() {
  let time = new Date("July 4, 2020 00:00:00").getTime();
  let x = setInterval(function() {
    let now = new Date().getTime();

let distance = time - now;

this.days = Math.floor(distance / (1000 * 60 * 60 * 24));
this.hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
this.minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
this.seconds = Math.floor((distance % (1000 * 60)) / 1000);

console.log(this.days)

  if (distance < 0) {
    clearInterval(x);
  }
  }, 1000);
  }
}

Шаблон:

<h1>test</h1>

<p>{{days}}</p>

Answer 1

Это потому, что вы объявляете свою функцию обратного вызова следующим образом:

function() { }

вместо использования функции обозначения стрелки:

() => { }

Вам необходимо преобразовать ваш обратный вызов в функцию стрелки.

let x = setInterval(() => {
  // ...
}, 1000);

Это работает, потому что this внутри функции стрелки относится к внешней области, тогда как в function() { } это относится к функции сам. На данный момент все, что вы делаете, это устанавливаете свойства для внутренней функции, а не для компонента.

Очистите интервал в ngOnDestroy

В качестве отступления вы также захотите очистить интервал в ngOnDestroy(), чтобы гарантировать, что обратный вызов не будет продолжать работать после уничтожения компонента.

Вы также можете изучить функцию Rx JS interval в качестве альтернативы.