Angular: значение модели данных изменяется, но представление (HTML) не показывает изменение

Question

Я получаю Данные из REST API (используя Angular in-memory-service для этого Билета) и создаю Объект с этими данными (myDateEntry). Объект сохраняется в массиве (myDateEntries). В моем компоненте (Timetracker) я меняю значения и показываю значения через привязку данных. Он отлично работает с числовой переменной в моем объекте myDateEntry, но не с переменной даты. Изменение переменной даты никогда не отображается в представлении. Однако я вижу, что это изменение в модели данных с console.log (). Как я могу сделать эту работу для переменной даты?

---

myDateEntry:

export class myDateEntry{

showBreakTime: Date;
test: number;

constructor(data: any){
    console.log("new instance of myDateEntry created");
    this.test = 0;
    this.showBreakTime = new Date();
   }
}

myDateEntries:

import {myDateEntry} from './myDateEntry';

export class myDateEntries{
myDateEntries: myDateEntry []=[];
myDateEntry: myDateEntry;
addEntry: boolean;

constructor(){
    console.log("new instance of myDateEntries created");
}

public addDateEntry(data: myDateEntry): void{
    this.myDateEntries.push(data);
} 
}

MYSERVICE:

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';


@Injectable()
export class MyService {

private url = 'api/workdayObject';

constructor(private http: HttpClient) {
}

getWorkdayObject () {
    return this.http.get(this.url);
}
}

TimeTracker:

import { Component, OnInit } from '@angular/core';
import { myDateEntry } from '../model/myDateEntry';
import { MyService } from '../services/myService.service';
import { myDateEntries } from '../model/myDateEntries';

@Component({
  selector: 'app-timetracker',
  templateUrl: './timetracker.component.html',
  styleUrls: ['./timetracker.component.css']
})
export class TimetrackerComponent implements OnInit {

  myDateEntry: myDateEntry;
  myDateEntries: myDateEntries;

  constructor(private myService: MyService) {

  }

  ngOnInit() {
    this.myDateEntries = new myDateEntries();
    this.myService.getWorkdayObject().subscribe(data =>{
      console.log(data);
    });
    this.getWorkdayObject();

  }

  getWorkdayObject(){
    this.myService.getWorkdayObject().subscribe(data =>{
      this.myDateEntry = new myDateEntry(data);
      this.myDateEntries.addDateEntry(this.myDateEntry);
    });
  }

  changeTime(){
   this.myDateEntry.showBreakTime.setMinutes(
   this.myDateEntry.showBreakTime.getMinutes()+15);
   console.log("this.myDateEntry.showBreakTime.getHours(): " + 
    this.myDateEntry.showBreakTime.getHours());
   console.log("this.myDateEntry.showBreakTime.getMinutes(): " + 
    this.myDateEntry.showBreakTime.getMinutes());
  }

  changeNumber(){
    this.myDateEntry.test = this.myDateEntry.test + 1;
    console.log("this.myDateEntry.test: " + this.myDateEntry.test);
  }

}

Timetracker View:

<p>
{{this.myDateEntry?.showBreakTime | date: 'HH:mm'}} h
</p>
<button (click)="changeTime()">changeTime</button>
<br/>
<p>
{{this.myDateEntry?.test}}
</p>
<button (click)="changeNumber()">changeNumber</button>