Дата не обновляется после смены месяца

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

но он не обновляет дату - я заставил его работать, создав метод getDate(), который использует DatePipe в ts(смотрите код ниже) и возвращает строку, но хотел бы знать, почему первый случай не сработал, и если есть это способ заставить его работать...?: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 каждый раз, когда вы изменяете дату. Вы можете видеть в этом стеке, что он работает без вызова 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());
  }
}