查看模型不更新後視圖

Question

該視圖最初呈現正確，所以我知道該服務在頁面加載時正在工作，但我觸發decrementDate()或incrementDate()新的日期是alert() ed，但視圖未更新。 我不理解什麼？

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); 
    } 
} 

模板：

<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

你正在運行到什麼是Angular2的變化檢測。它假定數據不可變性，所以當你調用.setDate（）函數時，它實際上並不知道任何事情都發生了變化，因爲它沒有查找它。相反，您應該將該屬性設置爲新的日期。

例子：

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