Question

我正在创建我的第一个Angular应用程序，并且在可观察对象（惊讶，意外）中苦苦挣扎。我的HTML标签中有这个标签：

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

我尝试在我的观察对象中使用异步管道。为了更新我的可观察值，我进行了一些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();
      });
  }

我正在尝试重现此处描述的行为：https://malcoded.com/posts/angular-async-pipe/ 我如何理解代码中发生的事情：从REST调用获取响应正文后，我更新了behaviourSubject将具有的下一个值。然后，我创建一个新的可观察对象，并将下一个值设置为所需的响应。然后，我更新HTML中的可观察对象。 HTML应该重新加载（因为它侦听值更改，而我的可观察值刚刚更改）。我的REST调用中的新值应该在HTML中可见。我想念什么？

Answer 1

我相信您正在尝试通过输入传递可观察到的信息，但我不确定是否会检测到并发送更改。我建议将可观察对象存储到服务中，以便可以通过依赖项注入来获取它。

下面是一个示例，向您展示如何使用主题（我建议BehaviorSubject）。然后，您可以将服务注入到日历月视图组件中，并在其中使用可观察的组件。（仅供参考：可观察对象的标准是在末尾添加一个$，以便您知道它是一个）

@Injectable({
  providedIn: 'root'
})
export class UserService {

  private userList: User[];
  private userListSubject: BehaviorSubject<User[]> = new BehaviorSubject<User[]>([]);

  public constructor(private http: HttpClient) { }

  public usersList$(): Observable<User[]> {
    return this.userListSubject.asObservable();
  }

  public getAll$(): Observable<User[]> {
    return this.http.get<User[]>('/api/users').pipe(
      tap(userList => {
        this.userList = userList;
        this.userListSubject.next(this.userList);
      })
    );
  }
}

异步管道可观察角度

1 个答案: