angular - Observable 不更新视图

Question

我正在尝试为 Angular 构建一个调度程序组件。但是，在创建事件时，视图似乎没有被更新。

我创建了一个最小的 StackBlitz 来演示这个问题。

编辑

我也用日历组件创建了一个 StackBlitz。请注意，标签正在更新，但日历上的 div 没有。

export class AppComponent {
  constructor() {
    this.calendarEvents$ = new BehaviorSubject<CalendarEvent[]>([]);

    this.calendarEventParts$ = this.calendarEvents$
      .pipe(map((events) => {
        // Split event over the days it goes...
        return events.map(ev => <CalendarEventPart>{
          calendarEvent: ev
        });
      }));
  }

  calendarEvents$: BehaviorSubject<CalendarEvent[]>;
  calendarEventParts$: Observable<CalendarEventPart[]>;

  onAddEvent() {
    this.christmas = {...};
    this.calendarEvents$.pipe(take(1))
      .pipe(map((events) => events.push(this.christmas)))
      .subscribe(() => {});
  }

  onChangeChristmasStart() {
    this.christmas.start = new Date(2022, 11, 24);
  }
}

BehaviorSubject按预期更新视图，但在使用运算符后map，视图未更新。我已经完成了this.calendarEvents$.next(data)，但这并不能解决核心问题，并且可以防止检测到属性更改。

编辑

我已经更新了代码，以便手动查找更改并明确强制触发更改检测器。然而，即使changeDetectorRef.detectChanges()只在必要时调用，视图仍然没有更新。

Answer 1

您需要更新您的calendarEvents$行为主题。

onAddEvent() {
   this.christmas = {...};
   this.calendarEvents$.next([...this.calendarEvents$.value, this.christmas]);
}