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

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

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

Answer 2

Может быть, вам нужно использовать Observable.forkJoin вместо.

import {Observable} from 'rxjs/Observable';

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

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

Answer 3

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

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

Чек https://stackblitz.com/edit/angular-rz1qn1

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