查看模型不更新后视图

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;