angular - Datum uppdateras inte efter bytet av en månad

Jag gör bara en enkel vy där jag kan ändra en månad:

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

och sedan i min .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()
}

men det uppdaterar inte datumet - jag fick det att fungera genom att skapa en metod getDate() som använder DatePipe i ts (se koden nedan) och returnerar en sträng men skulle vilja veta varför det första fallet inte fungerade och om det finns ett sätt att få det att fungera...?:s

kod som fungerar:

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

Svar #1

Angular upptäcker ingen förändring när Date-objektet ändras. Ett sätt att tvinga igenom förändringsdetektion är att skapa ett nytt Date-objekt varje gång du ändrar datumet. Du kan se i denna stackblitz att det fungerar utan att manuellt anropa ChangeDetectorRef.detectChanges (förutom, kanske, om din komponent använder 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());
  }
}

Relaterade artiklar