forkJoin не привязывает данные к внешнему интерфейсу в Angular 6

Мне нужно сделать несколько запросов 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>

angular rxjs fork-join
person Anirudh    schedule 10.01.2019    source источник
comment
каковы ожидаемые выходные данные каждого res?   -  person John Velasquez    schedule 10.01.2019
comment
Можете ли вы правильно увидеть запрос и ответ на вкладке сети при использовании forkJoin?   -  person Amit Chigadani    schedule 10.01.2019

Ответы (3)


arrow_upward
0
arrow_downward

Я чувствую себя таким глупым прямо сейчас. Я забыл изменить одну логическую переменную для отображения данных, которые были пропущены в моем методе подписки forkJoin.

person Anirudh    schedule 10.01.2019

arrow_upward
0
arrow_downward

Я не мог видеть конкретную причину, которая вызывает проблему.

Я создал рабочий код в StackBlitz из вашего кода

Проверьте https://stackblitz.com/edit/angular-rz1qn1.

Примечание. Я использовал import { forkJoin, from } from 'rxjs';

person Derviş Kayımbaşıoğlu    schedule 10.01.2019

arrow_upward
0
arrow_downward

Возможно, вам нужно использовать Observable.forkJoin вместо этого.

import {Observable} from 'rxjs/Observable';

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

Рабочий пример

person Pardeep Jain    schedule 10.01.2019