在 Angular 中从 .subscribe 中获取订阅数据答案

【问题标题】：Get Subscribe Data out of .subscribe in Angular在 Angular 中从 .subscribe 中获取订阅数据
【发布时间】：2019-07-19 06:48:41
【问题描述】：

我想在订阅者被调用后返回事件。

 getCalendarData(){
      var body = JSON.stringify({"cid": "etNG3V61LWS6Pzkeb_omuZGMVAOLd1_70tRQblVizWQ~",
      "seldt":"2018-09-18"}); 
      var headers = new HttpHeaders();
      headers.append('Content-Type', 'application/json');

      return this.httpClient.post(this.apiUrl, body, { headers: headers })

    }

上面的代码完美运行。它还返回 JSON。

现在的问题是，当我在 getCalendarEvents() 中调用此方法时，我未能返回事件，因为该函数不是 void。所以它应该有一个返回类型。那么由于订阅是异步的，我将如何传递事件。

 getCalendarEvents(): Array<CalendarEvent> {
         var listCal:any = []
         this.getCalendarData().subscribe((data: any) => {
          listCal = data;
              console.log('listCal data: ', listCal);  

             let startDate: Date,
             endDate: Date,
             event: CalendarEvent;
             let colors: Array<Color> = [new Color(200, 188, 26, 214), new Color(220, 255, 109, 130), new Color(255, 55, 45, 255), new Color(199, 17, 227, 10), new Color(255, 255, 54, 3)];
             let events: Array<CalendarEvent> = new Array<CalendarEvent>();
             for (let i = 1; i < listCal.length; i++) {
                  event = new CalendarEvent(listCal[i].title, new Date(listCal[i].date), new Date(listCal[i].date), false, colors[i * 10 % (listCal[i].colour.length - 1)]);    

                  events.push(event);     
              }
             //console.log(events);     
             return events;
           }
         );    

         //return events; HERE the events has no data because I am outside the .subscribe!
    }

【问题讨论】：

How do I return the response from an asynchronous call?的可能重复
getCalendarEvents(): Array<CalendarEvent> 应该是 getCalendarEvents(): Observable<Array<CalendarEvent>>（如果你想使用 Promise，则应该是 getCalendarEvents(): Promise<Array<CalendarEvent>>）。
@Igor getCalendarEvents 有一个期待事件的返回类型！但是，当我将事件作为回报时，它什么也没给我！但是在订阅里面，事件有数据！
从建议的副本中阅读答案，它写得很好，并提供了许多示例，包括如何使用 Promises 和 Observables。
getCalendarEvents has a return type which is expecting events!

标签： angular typescript http nativescript angular-http

【解决方案1】：

您需要将其视为async 函数，因为它确实如此。这里有两种方法：

import { Observable, Subject } from 'rxjs';
import { map } from 'rxjs/operators';

getCalendarEvents(): Observable<Array<CalendarEvent>> {
  return this.getCalendarData().pipe(map((data: any) => {
    // Your parsing code...
    return events;
  }));
}

// or:

getCalendarEvents(): Observable<Array<CalendarEvent>> {
  const result: Subject<Array<CalendarEvent>> = new Subject<Array<CalendarEvent>>();
  this.getCalendarData().subscribe((data: any) => {
    // Your parsing code...
    result.next(events);
    result.complete();
  });
  return result;
}

【讨论】：

我需要从lodash导入地图吗？地图给了我一个错误，因为它没有被导入@Ian
从 'rxjs/operators' 导入 { map };
@Ian result.next(events); and result.complete(); 在 for 循环之外吗？
是的。它们代替了您的 return 声明。
@IanMacDonald 我需要使用 return result.asObservable() 还是只返回结果就可以了？