Угловой 4-х канальный формат даты и времени с обновлением каждую минуту

Question

Мне нужны рабочие цифровые часы в угловых 4
, пытался сделать это с обычным JavaScript и setInterval для запуска функции каждые 60 секунд.но интерполяция строки не обновляет время, когда свойство изменилось.

theDate = new Date();
theDay = this.theDate.getDay();
hours = this.theDate.getHours();
minutes = this.theDate.getMinutes();
session = "AM";
ngOnInit() {
    if (this.hours == 0) {
        this.hours = 12;
    }

    if (this.hours > 12) {
        this.hours = this.hours - 12;
        this.session = "PM";
    }
    this.stringHours = (this.hours < 10) ? "0" + this.hours : this.hours;
    this.stringMinutes = (this.minutes < 10) ? "0" + this.minutes : this.minutes;
    this.clock = this.stringHours + ":" + this.stringMinutes + " " + this.session;
    this.refreshClock();
}
refreshClock() {
    setInterval(() => {
        this.hours = this.theDate.getHours();
        this.minutes = this.theDate.getMinutes();
        this.stringHours = (this.hours < 10) ? "0" + this.hours : this.hours;
        this.stringMinutes = (this.minutes < 10) ? "0" + this.minutes : this.minutes;
        this.clock = this.stringHours + ":" + this.stringMinutes + " " + this.session;
        console.log('work');
    }, 1000)

}

, поэтому я попробовал угловой канал даты, но он также не обновляет время, а просто обновляет его после обновления приложения.

TypeScript

theDate = new Date();

HTML

 {{ theDate | date :'shortTime' }}

угловая труба даты:
https://angular.io/api/common/DatePipe

Answer 1

Вы пропустили обновление theDate внутри setInterval()

refreshClock() {
    setInterval(() => {
        this.hours = this.theDate.getHours();
        this.minutes = this.theDate.getMinutes();
        this.stringHours = (this.hours < 10) ? "0" + this.hours : this.hours;
        this.stringMinutes = (this.minutes < 10) ? "0" + this.minutes : this.minutes;
        this.clock = this.stringHours + ":" + this.stringMinutes + " " + this.session;
        console.log('work');
        // add this line
        this.theDate = newly calculated date
    }, 1000)

}

DEMO