Observable 不更新视图

Question

我正在尝试为 angular 构建一个 scheduler component。但是，在创建事件时，似乎没有更新视图。

我创建了一个 minimal StackBlitz that demonstrates the issue。

编辑

我也创建了一个StackBlitz with the calendar component。请注意，标签正在更新，但日历上的 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) 但这并没有解决核心问题，并且无法检测到属性更改。

编辑

I've updated the code in order to look for changes manually 并强制显式触发变化检测器。然而，即使仅在必要时调用 changeDetectorRef.detectChanges()，视图仍未更新。

Answer 1

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

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

Observable 不更新视图

Observable not updating the view

angular

rxjs

async-pipe

编辑

编辑