如何制作方法等待可观察的＃订阅首先被调用，然后再进行其余代码

Question

我有一个Angular应用，我在其中使用第三方聊天插件NG-Chat。要实现其聊天适配器，我必须覆盖方法

getMessageHistory(userId: any): Observable<Message[]>

在此方法中，我正在调用我的服务方法以从我的服务器获取数据

 this.userService.getChatHistory 

并订阅它，一旦数据可用但是由于某种原因，在订阅呼叫的订阅回调之前，订阅呼叫后，getMessageHistory中的语句被调用。以下是我的代码

服务方法

  public getChatHistory(loggedInUserId,selectedUserId){
         let data = {"requestingUserProfileId": loggedInUserId, "targetUserProfileId":selectedUserId};
        return this.http.post(this.apiEndPoint + '/xxx/', data, this.jwt())
            .map((response: Response) => response.json());

    }

在我的适配器实现中

getMessageHistory(userId: any): Observable<Message[]> {
 let msgHistory: Array<Message> =[];
this.userService.getChatHistory(this._loggedInUserId,userId).subscribe(
                  messages => { 
             if(messages ==null || messages.length ==0){
                this.messages = [];
             }
             else{
             console.log("messages retrieved are "+messages);
             this.messages = messages;

            for (var msg of  this.messages) {
                 let tempMsg :Message = new Message();
                 console.log("from id is ",msg.fromId);
                  tempMsg.fromId= msg.fromId;
                  tempMsg.toId= msg.toId;
                  tempMsg.message= msg.messageText;
                  msgHistory.push(tempMsg);
            }
             }});
  console.log("msgHistory array ",msgHistory);  //==> This is getting //executed before the  messages => { in the subscribe above
            return Observable.of(msgHistory);

    }

在我的输出中，我可以看到 msgHistory array []在

之前打印

messages retrieved are [object Object],[object Object]

所以我的msghistory数组始终是空的。是否有一种方法是未返回空的msghistory，即代码应该等待订阅呼叫完成，然后再进行返回语句？

我也尝试放置逻辑

this.userService.getChatHistory(this._loggedInUserId,userId).subscribe

在单独的功能并返回它，即使是同一问题。

Answer 1

您需要了解 subscribe是一个异步操作;这意味着您已订阅的可观察到的值应异步发射值。我只能想到的一个解决方案是将可观察到的序列转换为诺言，并将控制台放置在.log语句中。您可以使用 topromise 函数来完成。有关更多详细信息，请检查http：//reactivex.io/rxjs/class/es6/observable.js〜observable.html#instance-method-topromise。

Answer 2

不确定，但是您可以尝试使用first和flatMap rxjs的CC_4操作员遵循代码：

getMessageHistory(userId: any): Observable<Message[]> {
 let msgHistory: Array<Message> =[];
 return this.userService.getChatHistory(this._loggedInUserId,userId)
            .first()
            .map(messages => { 
                if(messages ==null || messages.length ==0){
                    this.messages = [];
                } else {
                    console.log("messages retrieved are "+messages);
                    this.messages = messages;
                    for (var msg of  this.messages) {
                        let tempMsg :Message = new Message();
                        console.log("from id is ",msg.fromId);
                        tempMsg.fromId= msg.fromId;
                        tempMsg.toId= msg.toId;
                        tempMsg.message= msg.messageText;
                        msgHistory.push(tempMsg);
                    }
                }
                return Observable.of(msgHistory);
            });
}