嵌套的可观察订阅问题，无法取消订阅

Question

在ngOnDestory中，我取消了两个订阅，但仍然得到前面的错误。

this.proposalSubscription = this._posts.retrieveProposals(user.uid)
  .subscribe(proposals => {
      this.proposals = proposals;
      this.proposals.forEach(proposal => {
        this.chatSubscription = this._chat.retrieveChat(proposal.id).subscribe(chat => {
          if (chat) {
            this.chats.set(proposal.id, chat)
          }
        });
      })
    });

现在我几乎可以肯定问题出在这行:this.chatSubscription=this._chat.retrieveChat(proposal.id).subscribe(chat=>...即使我在注销之前取消了proposalSubscription和chatSubscription的订阅，但仍然会出现错误。有没有解决这个问题的方法？而且，我对RXJ和操作符没有太多的经验。有没有操作符可以用来避免这种嵌套订阅？

提前道谢。

Answer 1

您可以这样设置订阅：

this.proposalSubscription = this._posts.retrieveProposals(user.uid)
                                    .pipe(
                                      switchMap(proposals => {

                                        //if you need to save it in class variable you can save it like this
                                        this.proposals = proposals;

                                        const obs$ = proposals.map(p => {
                                          return this._chat.retrieveChat(p.id)
                                                     .pipe(
                                                       map(chat => {
                                                         this.chats.set(p,id, chat);
                                                       })
                                                     )
                                        });

                                        return forkJoin(obs$);
                                      })
                                    )
                                    .subscribe();

您可以根据需要组成您的操作员链，并且只有一个订阅。

在ngondestory中取消订阅，如下所示：

ngOnDestroy() {

 if(this.proposalSubscription) {
   this.proposalSubscription.unsubscribe()
 }
}

this._posts.retrieveProposals(user.uid)
                                    .pipe(
                                      take(1),
                                      switchMap(proposals => {

                                        //if you need to save it in class variable you can save it like this
                                        this.proposals = proposals;

                                        const obs$ = proposals.map(p => {
                                          return this._chat.retrieveChat(p.id)
                                                     .pipe(
                                                       map(chat => {
                                                         this.chats.set(p,id, chat);
                                                       })
                                                     )
                                        });

                                        return forkJoin(obs$);
                                      }),                                          
                                    )
                                    .subscribe();