Angular 用异步管道观察角度

我正在创建我的第一个Angular应用程序，我正在与可观察的事物（惊喜，惊喜）作斗争。我的HTML标记中有以下内容：

  <mwl-calendar-month-view
    *ngSwitchCase="'month'"
    [viewDate]="viewDate"
    [events]="observable | async"
    [activeDayIsOpen]="true"
  >

在这里，我尝试将异步管道与我的observable一起使用。 为了更新我的可观察值，我进行了一些REST调用（在用户单击按钮后），下面是我如何处理单击：

  observable: Observable<CalendarEvent[]>;
  behaviourSubject: BehaviorSubject<CalendarEvent[]> = new BehaviorSubject([{
    title: 'title12345',
    start: new Date(),
    end: new Date()
  }]);

(...)

  onCreateCalendarEventClick() {
    let calendarEvent: CalendarEvent;
    calendarEvent = {
      title: (document.getElementById('calendarEventName') as HTMLInputElement).value,
      start: new Date((document.getElementById('calendarEventStartDate') as HTMLInputElement).value),
      end: new Date((document.getElementById('calendarEventEndDate') as HTMLInputElement).value),
      color: undefined
    };
    let calendarEventApi: CalendarEventApi;
    let calendarEventColor;
    if (calendarEvent.color) {
      calendarEventColor = calendarEvent.color;
    }
    calendarEventApi = {
      title: calendarEvent.title,
      start: ToApiMapper.formatDateTimeToApi(calendarEvent.start),
      end: ToApiMapper.formatDateTimeToApi(calendarEvent.end),
      color: ToApiMapper.mapColorToApi(calendarEventColor)
    };
    this.calendarService.saveCalendarEvent(calendarEventApi).subscribe( () => {
      this.fetchCalendarData();
    }, error => {
      this.alertService.displayAlert('saving calendar event failed: ' + error);
    });
  }


  private fetchCalendarData() {
      const calendarEvents: CalendarEvent[] = [];
      this.calendarService.fetchCalendarData(this.userService.getLoggedUser()).subscribe(calendarEventsApi => {
        calendarEventsApi.forEach(calendarEventApi => {
          const calendarEvent: CalendarEvent = {
            title: calendarEventApi.title,
            start: new Date(calendarEventApi.startDate),
            end: new Date(calendarEventApi.endDate),
            color: {
              primary: calendarEventApi.eventColour,
              secondary: calendarEventApi.eventColour
            }
          };
          calendarEvents.push(calendarEvent);
        });
        this.behaviourSubject.next(calendarEvents);
        this.observable = this.behaviourSubject.asObservable();
      });
  }

可观察：可观察；
行为主体：行为主体=新的行为主体([{
标题：“标题12345”，
开始：新日期（），
完:新日期()
}]);
(...)
onCreateCalendarEventClick（）{
let calendarEvent:calendarEvent；
日历事件={
标题：（document.getElementById（'calendarEventName'）作为HTMLInputElement.value，
开始：新日期（（document.getElementById（'calendarEventStartDate'）作为HTMLInputElement.value），
结束：新日期（（document.getElementById（'calendarEventEndDate'）作为HTMLInputElement.value），
颜色：未定义
};
让calendarEventApi:calendarEventApi；
让我们用颜色；
if（calendarEvent.color）{
calendarEventColor=calendarEvent.color；
}
calendarEventApi={
标题：calendarEvent.title，
开始：ToApiMapper.formatDateTimeToApi（calendarEvent.start），
结束：ToApiMapper.formatDateTimeToApi（calendarEvent.end），
颜色：ToApiMapper.mapColorToApi（calendarEventColor）
};
此.calendarService.saveCalendarEvent（calendarEventApi）.subscribe（（）=>{
this.fetchCalendarData（）；
}，错误=>{
this.alertService.displayAlert（'保存日历事件失败：'+错误）；
});
}
私有fetchCalendarData（）{
常量calendarEvents:CalendarEvent[]=[]；
this.calendarService.fetchCalendarData（this.userService.getLoggedUser（））.subscribe（calendarEventsApi=>{
calendarEventsApi.forEach（calendarEventApi=>{
常量calendarEvent:calendarEvent={
标题：calendarEventApi.title，
开始：新日期（calendarEventApi.startDate），
结束：新日期（calendarEventApi.endDate），
颜色：{
主要：calendarEventApi.EventColor，
次要：calendarEventApi.EventColor
}
};
calendarEvents.push（calendarEvent）；
});
this.behavior.next（日历事件）；
this.observable=this.behavior.asObservable（）；
});
}

我试图重现这里描述的行为：

---

我如何理解我的代码中发生了什么：从REST调用中获得响应主体后，我更新行为主体将具有的下一个值。然后我创建一个新的可观察对象，下一个值已经设置为我想要的响应。然后，我用HTML更新我的可观察对象。HTML应该被重新加载（因为它监听值的变化和我的可观测值的变化）。我的REST调用中的新值应该在HTML中可见。我遗漏了什么？

我相信您正试图通过输入传递您的可观察内容，我不确定是否会检测到并发送更改。我的建议是将您的可观测数据存储到您的服务中，这样就可以通过依赖注入来获取它

下面是一个示例，演示如何使用主题（我建议使用BehaviorSubject）。然后，您可以将您的服务注入到calandar月视图组件中，并在其中使用您的observable。（仅供参考：可观测的标准是在末尾加上$，这样你就知道它是一个）

@可注入({
providedIn:'根'
})
导出类用户服务{
私有用户列表：用户[]；
private userListSubject:BehaviorSubject=新的BehaviorSubject（[]）；
公共构造函数（私有http:HttpClient）{}
公共用户列表$（）：可观察{
返回此.userListSubject.asObservable（）；
}
公共getAll$（）：可观察{
返回此.http.get（'/api/users'）.pipe(
点击（用户列表=>{
this.userList=userList；
this.userListSubject.next（this.userList）；
})
);
}
}

我不明白您为什么从我的方法中的“订阅”切换到您的方法中的“管道”+“点击”，但现在我无法在“点击”lambda中正确调试（调试器未输入此位置-我只能在“点击”和“管道”完成后在断点处停止）。我在HTML中使用了“usersList$（）| async”，但在处理REST调用的响应体之后，视图中仍然没有任何事情发生。我使用Observable、BehaviorSubject和async管道的方法正确吗？或者可以通过其他更容易访问的方式完成吗？您需要在

mwl日历月视图中添加
private userService:userService
。完成后，您可以在该组件中使用
userList$（）
。然后，您还需要在应用程序的任何位置使用alteast一次
this.getAll（）.subcribe（）
，以加载服务中的数据。如果我使用pipe+tap，那是因为当我使用getAll（）时，我进行了subcribe，它也允许我在那里执行操作。如果你不订阅你的可观测数据，你就不会收到数据。如果您使用的是Observable、BehaviorSubject和async管道，它应该可以正常工作。我建议您花点时间阅读官方文档，了解Observable是如何工作的。