Ansicht wird nicht aktualisiert nach Modell

Question

Die Ansicht wird zunächst ordnungsgemäß gerendert, damit ich weiß, der Dienst funktioniert, wenn die Seite geladen wird, aber was ich decrementDate() oder incrementDate() das neue Datum auslösen alert() ed, aber die Ansicht wird nicht aktualisiert. Was verstehe ich nicht?

export class CalNavComponent implements OnInit { 

    workingData: WorkingData; 

    constructor(private _workingDataService: WorkingDataService) { } 

    getWorkingData(): void { 

    this._workingDataService.getWorkingData().then(workingData => this.workingData = workingData); 
    } 

    ngOnInit(): void { 
    this.getWorkingData(); 
    } 

    decrementDate(): void { 

    this.workingData.selectedDate.setDate(this.workingData.selectedDate.getDate() - 1); 
    alert(this.workingData.selectedDate); 
    } 

    incrementDate(): void { 

    this.workingData.selectedDate.setDate(this.workingData.selectedDate.getDate() + 1); 
    alert(this.workingData.selectedDate); 
    } 
} 

Vorlage:

<div class="cal-nav"> 
    <div class="cal-nav-item"> 
    <md-icon class="cal-nav-icon" (click)="decrementDate()">chevron_left</md-icon> 
    </div> 
    <div class="cal-nav-item cal-nav-date"> 
    {{workingData?.selectedDate | date: "d MMM y"}} 
    </div> 
    <div class="cal-nav-item"> 
    <md-icon class="cal-nav-icon" (click)="incrementDate()">chevron_right</md-icon> 
    </div> 
</div> 

Answer 1

Was Sie laufen in ist Angular2 die Änderungserkennung. Es wird angenommen, dass die Daten unveränderbar sind. Wenn Sie also die Funktion .setDate() aufrufen, weiß sie nicht, dass sich irgendetwas geändert hat, weil sie nicht danach sucht. Stattdessen sollten Sie die Eigenschaft auf ein neues Datum festlegen.

Beispiel:

let newDate = new Date(this.workingData.selectedDate.getTime()); 
newDate.setDate(newDate.getDate() - 1); 
this.workingData.selectedDate = newDate;