Angular 5 使用 forkJoin 组合和链接并行调用不起作用

Question

我正在寻找一种在加载页面上的所有控件后执行某些操作的方法。这些控件通过调用http get 并行加载。

我尝试了类似于下面的代码，但它似乎没有解决问题。如果工作正常，某些文本应该显示“完成”。事实并非如此。我不确定我是否正确理解 forkJoin 的工作原理。我曾经在 Angular 1.x 中使用 Promise 进行这种链接。任何有助于理解问题和解决方案的帮助都将受到赞赏。

我正在寻找的解决方案类似于 Angular 1.x 的这个问题：Angular将并行和链式请求与 $http.then() 和 $q.all() 结合起来

完整代码位于http://plnkr.co/edit/xH6VJo

来源是 src/dash.ts

这是 Angular 5 和 typescript。

export class dash implements OnInit {
  sometext = 'Some text ...';
  private httpOptions = {
    headers: new HttpHeaders({ 'Content-Type': 'application/json' })
  };
  constructor(private http: HttpClient) {}
  click_me(): void {
    this.sometext = '';
    forkJoin([
      of(this.first_()),
      of(this.second_())
      ]).subscribe(val => {
        this.sometext = 'done...';
      })
  }
  first_(): void {
    this.http.get<any>('data/sampledata.json',this.httpOptions).subscribe(val=> {
    this.sometext = val.items[0].value;
    });
  }
  second_(): void {
    this.http.get<item[]>('data/sampledata.json',this.httpOptions).subscribe(val=> {
    this.sometext = val.items[1].value;
    });
  }
}

Answer 1

主要原因是因为你的first()andsecond()没有返回Observable. .forkJoin()只能接受一个数组，Observables并行激发它们，然后它必须等待所有可观察对象完成才能开始发出结果值。您的处理程序从未执行的主要原因是因为首先complete()没有，因此它们都无法完成，并且您将永远不会发出。Observables.forkJoin().forkJoin()

这是你应该做的。对于first()和second()，让他们返回observable. 如果您想更改this.sometext两者的执行时间，请使用运算符.do()：

first_(): Observable<any> {
    this.http.get<any>('data/sampledata.json', this.httpOptions)
        .do(val => {
            this.sometext = val.items[0].value;
        });
}

second_(): Observable<any> {
    this.http.get<item[]>('data/sampledata.json', this.httpOptions)
        .do(val => {
            this.sometext = val.items[1].value;
        });
}

现在你click_me()应该可以正常工作了：

click_me(): void {
    this.sometext = '';
    forkJoin([
        of(this.first_()),
        of(this.second_())
    ]).subscribe(val => {
        this.sometext = 'done...';
    })
}

请注意，由于Observable.forkJoin()并行触发它们的请求，因此不能保证您的first()请求将在您的second().