Шаблон не обновляется при изменении значения Signal

Question

Мой шаблон:

      {{ announcements().start | date: "d MMM" }} -
{{ announcements().end | date: "mediumDate" }}

<button type="button" class="btn btn-primary" (click)="goForward()">
  <i class="bi bi-chevron-right"></i>
</button>

Мой компонент:

      export class AnnouncementsComponent {
  readonly announcements: Signal<Announcements>;
  announcementsForm: FormGroup;
  constructor(
    private announcementsServ: AnnouncementsService,
    private logger: NGXLogger,
    private fb: FormBuilder,
  ) {
    this.announcements = this.announcementsServ.announcements.asReadonly();
    this.announcementsForm = this.fb.group({ content: '' });
    effect(() => {
      this.announcementsForm.setValue({
        content: this.announcements().content,
      });
    });
  }
  goForward() {
    this.announcementsServ.goForward();
  }
  goBackwards() {
    this.announcementsServ.goBackwards();
  }
  onSubmit() {
    this.announcementsServ.changeContent(this.announcementsForm.value.content);
  }
}

Мой сервис:

      @Injectable()
export class AnnouncementsService {
  announcements: WritableSignal<Announcements>;
  constructor(private logger: NGXLogger) {
    this.announcements = signal({
      start: new Date('2023-08-27'),
      end: new Date('2023-09-03'),
      content: `some content`,
    });
  }

  changeDates(howMuch: number) {
    this.announcements.update((announcements: Announcements) => {
      announcements.start.setDate(announcements.start.getDate() + howMuch);
      announcements.end.setDate(announcements.end.getDate() + howMuch);
      return announcements;
    });
  }

  goForward() {
    this.changeDates(7);
  }
  goBackwards() {
    this.changeDates(-7);
  }

  changeContent(content: string) {
    this.logger.debug(content);
  }
}

Эффект успешно выполняется как в компоненте, так и в службе, но шаблон не требует обновления. Почему?

Я успешно использовал этот шаблон в другом компоненте и сервисе, но с логическим сигналом. Проблема с сигналами одного объекта?

Answer 1

Канал перерисовывается только тогда, когда дата новая, а не для мутаций. https://angular.io/api/common/DatePipe#description

Обратите внимание, что изменение объекта Date не приводит к повторной визуализации канала. Чтобы гарантировать выполнение канала, необходимо создать новый объект Date.