可观察返回未定义答案

【问题标题】：Observable returns undefined可观察返回未定义
【发布时间】：2021-09-16 14:33:09
【问题描述】：

我的应用程序中的服务出现问题。我有一个服务，我有一个可观察的。该 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)
        );
    }
  }

感谢您的帮助。

【问题讨论】：

标签： angular rxjs observable

【解决方案1】：

我想你想要这样的东西：

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
      })
    );
}

【讨论】：

不确定是否需要在最后订阅，因为该函数返回一个可观察对象
你说的完全正确，我错过了。我已经编辑了我的答案。然而值得注意的是，这个函数的调用者需要订阅。

【解决方案2】：

我认为您应该使用管道运算符。我只是即时执行此操作，但它看起来像：

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

doc

【讨论】：

这个解决了我的问题，谢谢