Обработка наблюдаемых данных, когда они зависят от данных от другого

Question

Когда один наблюдаемый пробег, он зависит от данных, которые поступают из другого наблюдаемого, и я не могу понять, как правильно регулировать эту зависимость.

Один наблюдаемым получают данные от Firebase и подписавшись создает простой массив чисел с именем novelsRead: Array

Другого наблюдаемым получает ответ от апи и подписавшись он предназначен, чтобы отфильтровать все записи Кто на иду присутствуют в романах. Читайте [].

Проблема в том, что ответ получен из api, novelsRead [] по-прежнему пуст, потому что Firebase еще не ответил, поэтому ничего не будет отфильтровано из ответа api.

код ниже:

экспорт класс HomePage {

currentnovels: any; 
novels: any; 
unreadnovels: any; 
nextnovels: any; 
novel: any; 
resultsPageNumber: number = 1; 
novelFullPosterPath: any; 
novelsread: Array<number> = []; 

private basePosterUrlMedium = 'http://image.novels.org/t/p/w500'; 
private basePosterUrlSmall = 'http://image.novels.org/t/p/w185'; 

constructor(private http: Http, 
    private novelsApi: NovelsApiService, 
    private dataService: DataService, 
) { 
    //this takes data from Firebase and pushes it to simple array of ids (numbers) 
    this.dataService.list('novels-read') 
     .subscribe(data => { 
      data.map(results => { 
       this.novelsread.push(results.novelsId); 
      }) 
     }) 
} 


ngAfterViewInit() { 
    this.novelsApi.getnovelsByPage(this.resultsPageNumber) 
    .subscribe(data => { 
     this.novels = data.results; 
     this.novels.map(data => { 

      data.full_poster_path = this.basePosterUrlMedium + data.poster_path; 
      return data; 
     }) 
      .filter(data => { 
       let found = this.novelsread.indexOf(data.id); 
       //It seems when the api responds, this.novelsRead is still empty [] because Firebase has not responded yet 
       console.log("this novelsread[0] is ", this.novelsread[0]); 
       console.log("data.id found is ", found); 
       return data; 
      }) 
    }) 
} 

Ищу чистейшей решение, которое ли с помощью события или наблюдаемые цепи или любые другие предложения, как двигательные функции из конструктора ngAfterViewInit и наоборот.

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

Answer 1

Использование forkJoin должно помочь вам. Это позволяет обрабатывать результат только тогда, когда оба запроса в комплекте: https://github.com/Reactive-Extensions/RxJS/blob/master/doc/api/core/operators/forkjoin.md

ИЛИ если ваш второй запрос зависит от 1-го ответа - использовать switchMap

const request1$ = Rx.Observable.of('response1').delay(2000); 
 
const request2$ = Rx.Observable.of('response2').delay(100); 
 

 
Rx.Observable.forkJoin(request1$, request2$) 
 
    .subscribe(res => console.log(`forkJoin: ${res}`)); 
 

 
request1$.switchMap(res1 => { 
 
    console.log(`switchMap: ${res1}`); 
 
    return request2$; 
 
}).subscribe(res2 => console.log(`switchMap: ${res2}`));

<script src="https://unpkg.com/rxjs/bundles/Rx.min.js"></script>