Angular 当信号的值发生变化时，模板不会更新

我的模板:

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

Effect在组件和服务中都能成功执行，但模板不想更新.为什么？

我在另一个组件和服务中成功地使用了此模式，但使用的是布尔信号.是不是单一物体的信号有问题？