首页 > 解决方案 > 可观察返回未定义

问题描述

我的应用程序中的服务有问题。我有一个服务,我有一个可观察的。该 observable 还包含另一个 observable 和另外两个函数,它们正在处理来自内部 observable 的数据。问题是,当我第一次加载应用程序时,我得到了 undefined,因为服务在内部 observable 和数据修改功能完成之前返回了外部 observable。有人告诉我我可以为此使用 switchMap,但我对此感到非常困惑。任何人都可以帮助如何使用 switchMap 以便外部 observable 在返回任何值之前等待内部 observable 和函数?

这是服务的样子:

  fetchFilteredReservations(filterBy: any, search: any): Observable<any> {
    this.reservation.fetchReservations().subscribe((data: any) => {
      const data1 = this.loopData(data)
      const data2 = this.switchData(data1, filterBy, search)
      this.filteredReservations = data2
    });
      return of(this.filteredReservations);
  }

  loopData(data: any) {
    let loopData = data
    loopData.forEach((element: any) => {
      let year: any = 0;
      let month: any = 0;
      let day: any = 0;
      day = element.createdDate.slice(0, 1);
      if (day < 10) {
        day = '0' + day;
      }
      month = element.createdDate.slice(2, 4);
      if (month < 10) {
        month = '0' + month;
      }
      year = element.createdDate.slice(5, 9);
      let date = `${year}-${day}-${month}`;
      element.createdDate = date;
      if (this.user === element.user) {
        element.canDelete = true;
      } else {
        element.canDelete = false;
      }
    });
    return loopData
  }

  switchData(data: any, filterBy: any, search: any){
    let filterData = []
    switch (filterBy) {
      case 'createdBy':
        return filterData = data.filter(
          (element: any) => element.user.includes(search)
        );
      case 'createdFor':
        return filterData = data.filter(
          (element: any) => element.reservedFor.includes(search)
        );
      case 'createdOn':
        return filterData = data.filter(
          (element: any) => element.createdDate.includes(search)
        );
      case 'reservedDate':
        return filterData = data.filter(
          (element: any) => element.reservedDateData.includes(search)
        );
      case 'desk':
        return filterData = data.filter(
          (element: any) => element.name.includes(search)
        );
    }
  }

谢谢你的帮助。

标签: angularrxjsobservable

解决方案


我想你想要这样的东西:

fetchFilteredReservations(filterBy: any, search: any): Observable<any> {

    this.reservation.fetchReservations().pipe(
      switchMap((data: any) => {
          const data1 = this.loopData(data);
          const data2 = this.switchData(data1, filterBy, search);
          this.filteredReservations = data2;
          return data2; // or this.filteredReservations
      })
    );
}


推荐阅读