`Working Example`

Question

我需要从组件中发出多个HTTP请求，才能在前端加载不同的部分。

需要一个接一个地提出请求，因此我使用forkJoin来实现这一点。

我已成功按预期获取数据。但是数据未在前端加载。当我进行单独的调用而不是使用forkJoin时，我正在获取数据，并且视图也与数据绑定。

这是我的代码：

TS文件

res1: string;
res2: string;
res3: string;
res4: string;
res5: string;

getDetails() {

   forkJoin(
        this.http.get(url1, { params: params1 }).pipe(map((res:Response) => res)),
        this.http.get(url2, { params: params2 }).pipe(map((res:Response) => res)),
        this.http.get(url3, { params: params3 }).pipe(map((res:Response) => res)),
        this.http.get(url4, { params: params4 }).pipe(map((res:Response) => res)),
        this.http.get(url5, { params: params5 }).pipe(map((res:Response) => res))

    ).subscribe(
      data => {

         this.res1 = JSON.stringify(data[0]);
         this.res2 = JSON.stringify(data[1]);
         this.res3 = JSON.stringify(data[2]);
         this.res4 = JSON.stringify(data[3]);
         this.res5 = JSON.stringify(data[4]);

    },
      error => {
                 console.log(error.toString());                  
    });
}

HTML文件

<p>{{ res1 }}</p>
<p>{{ res2 }}</p>
<p>{{ res3 }}</p>
<p>{{ res4 }}</p>
<p>{{ res5 }}</p>

Answer 1

我看不到导致问题的具体原因。

我用您的代码在StackBlitz中生成了工作代码

选中https://stackblitz.com/edit/angular-rz1qn1

注意：我用过import { forkJoin, from } from 'rxjs';

Answer 2

我现在觉得很傻。我忘记更改一个布尔变量来显示我的forkJoin订阅方法中遗漏的数据。

Answer 3

也许您需要改用Observable.forkJoin。

import {Observable} from 'rxjs/Observable';

Observable.forkJoin(obsArray)
  .subscribe((res) => {
    ...

forkJoin不将数据绑定到Angular 6中的前端

3 个答案:

`Working Example`