首页 > 解决方案 > ForkJoin 无法从多个声明的主题中分叉可观察对象

问题描述

我有两个函数可以进行两次 HTTP 调用并保存请求返回的数据。与此同时,它还会向从这个函数返回的 Subject 的观察者发送成功响应,就像这样。

import { Observable, of, Subject} from 'rxjs';
import { first } from 'rxjs/operators';
import { HttpClient, HttpRequest } from '@angular/common/http';

export class subjectServices : : Observable<any>{
dataone : any;
constructor(private http :HttpClient){}

  observableOne() : Observable<any>{
    let subjectOne = new Subject<any>();
    let subjectOneObserver = subjectOne.asObservable();
    this.http.get('url').subcribe(data=>{
       this.dataone = data;
       subjectOne.next("Success"); 
       //subjectOne.complete("Success");
       // changing "next" to "complete" makes it works     
      })
    return subjectOneObserver;
  }


  observableTwo() : Observable<any>{
    let subjectTwo = new Subject<any>();
    let subjectTwoObserver = subjectTwo.asObservable();
    this.http.get('url').subcribe(data=>{
      this.dataTwo = data;
      subjectTwo.next("Success");
      //subjectTwo.complete("Success"); //this will work
       // changing "next" to "complete" makes it works     

    })
   return subjectTwoObserver;
  }
}

在我的组件中,我想同时调用这两个函数并等待它们响应我这样使用 ForkJoin

import { forkJoin, Observable } from 'rxjs';
import {subjectServices} from './subjectServices.ts'
@Component({
selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  constructor(private SubjectServices : subjectServices){
  }

  callBothSubjectSimultaneously(){
    let response1 = this.SubjectServices.observableOne();
    let response2 = this.SubjectServices.observableTwo();
    let allResponse = ForkJoin(response1, response2);
    allResponse.subscribe(responseList =>{
      let responseData1 = responseList[0];
      let responseData2= responseList[1];
      console.log("forkJoin completed")
    });
  }
}

尽管这两个函数都在执行服务中的 next() 语句,但 allResponse.subscribe 中的代码永远不会被触发。

我知道如果我直接在 ForkJoin 函数中提供 http 调用,这会起作用,但如果 observable 来自我已声明的主题,它会以某种方式不起作用。我不明白我做错了什么。

标签: angularrxjsfork-join

解决方案


推荐阅读