更改月份后日期未更新

Question

我只是做了一个简单的视图，我可以更改一个月：

    <button class="btn btn-primary" (click)="switchToPrevMonth()"><</button>
{{currentDate|date:'MMMM'}}
<button class="btn btn-primary" (click)="switchToNextMonth()">></button>

然后在我的 .ts 中：

ngOnInit() {
this.currentDate = new Date();
}

switchToNextMonth() {
 this.currentDate.setMonth(this.currentDate.getMonth()+1)
 this.cdRef.detectChanges()
}

switchToPrevMonth() {
this.currentDate.setMonth(this.currentDate.getMonth()-1)
this.cdRef.detectChanges()
}

但它不会刷新日期 - 我通过创建一个在 ts 中使用 DatePipe 的方法 getDate() 使其工作（查看下面的代码）和 returns 一个字符串，但想知道为什么第一个案例不起作用，如果有办法让它起作用...？:s

有效代码：

    <button class="btn btn-primary" (click)="switchToPrevMonth()"><</button>
{{getDate()}}
<button class="btn btn-primary" (click)="switchToNextMonth()">></button>

.ts:

getDate():string{
return this.dp.transform(this.currentDate,"MMMM");
}

Answer 1

Angular 在修改 Date 对象时未检测到任何更改。强制更改检测的一种方法是在每次修改日期时创建一个新的 Date 对象。您可以在 this stackblitz 中看到它无需手动调用 ChangeDetectorRef.detectChanges 即可工作（除非您的组件使用 ChangeDetectionStrategy.OnPush）。

export class MyComponent implements OnInit {

  public currentDate: Date;

  ngOnInit() {
    this.currentDate = new Date();
  }

  switchToNextMonth() {
    this.incrementMonth(1);
  }

  switchToPrevMonth() {
    this.incrementMonth(-1);
  }

  private incrementMonth(delta: number): void {
    this.currentDate = new Date(
      this.currentDate.getFullYear(),
      this.currentDate.getMonth() + delta,
      this.currentDate.getDate());
  }
}

更改月份后日期未更新

Date not updating after change of a month

typescript

date-pipe

angular