在使用angular-calendar的插入服务的aray时，Angular不会检测到引用对象的更改

Question

所以我正在使用angular-calendar，当我按下一个按钮时，我有一个对话框，现在我将一个随机事件对象添加到我的calendarservice事件数组中，用于测试目的：

 onButtonClick() {
      var date = addHours(new Date(), 2)
      this.calendarService.onCreateEvent('test added',date )
      console.log(date)
    }

将其添加到我的注入服务中：

export class CalendarService {
  events: CalendarEvent[] = [
    { title: "my test event 1", start: new Date() },
    { title: "my test event 2", start: addDays(new Date(), 1) }
  ];

现在，我使用ngOnit在组件中设置本地事件数组：

export class ScheduleCalendarComponent implements OnInit{
  constructor(
    private calendarService: CalendarService,
    public dialog: MatDialog
  ) {}

  view: string = "month";

  viewDate: Date = new Date();

  events: CalendarEvent[] = [];

  refresh: Subject<any> = new Subject();

  ngOnInit(): void {
    this.events = this.calendarService.events;
  }

所以现在它拉取正确的事件，但当我添加事件时，它不会更新DOM，因为我只更新数组OnInit，所以只有在更改页面并返回后，使用calendarservice事件数组，如果我更改更新方法，它才能工作：

  onCreateEvent(title: string, start: any) {
    this.events = [...this.events, {title: title, start: start}]
  }

我使用它并将其添加到日历中，如下所示：

 <mwl-calendar-day-view
    *ngSwitchCase="'day'"
    [viewDate]="viewDate"
    [events]="this.calendarService.events"
    (hourSegmentClicked)="openDialog()"
  >
  </mwl-calendar-day-view>

但是我该如何使用组件自己的数组而不是服务数组呢？让组件像max一样使用自己的数组是不是比直接从服务中获取更好呢？

我想使用components数组来做这件事，但它不会在单击按钮时更新：

 <mwl-calendar-day-view
    *ngSwitchCase="'day'"
    [viewDate]="viewDate"
    [events]="events"
    (hourSegmentClicked)="openDialog()"
  >
  </mwl-calendar-day-view>

希望这是有意义的

谢谢你！

Answer 1

这是因为有不同的changeDetectionStrategy，而您看到的是@Component下的changeDetectionStrategy.onPush

changeDetection: ChangeDetectionStrategy.OnPush

为什么不使用以下命令创建一个新的数组副本

ngOnInit(): void {
  this.events = [...this.calendarService.events];
}

或

ngOnInit(): void {
  this.events = JSON.parse(JSON.stringify(this.calendarService.events));
}

这样你就不需要修改服务数组events了，可以很容易地使用：

onCreateEvent(title: string, start: any) {
 this.events = [...this.events, {title: title, start: start}]
}