Angular: как бороться с асинхронными проблемами?

Question

Я пытаюсь разобраться с асинхронной проблемой Angular 6. Вот пример.Я просто хочу войти в «если» и отобразить журнал консоли, но этого никогда не происходит.getListOne и getListTwo вызывают Observable API и хорошо отображаются в моем html.

ListOne = [];
ListTwo = [];

    ngOninit() {

    this.getListOne();
    this.getListTwo();

    if (this.ListTwo.length > 0 ) {
        console.log("well done at least !";
    }

    }

Answer 1

Вам нужно subscribe для таких наблюдаемых, как:

this.getListTwo().subscribe((result) => {
   if(result.length > 0){
    console.log("well done at least !");
   }
});

Но поскольку это две наблюдаемые, и они завершаются в разное время, вам необходимо объединить их и подписаться на объединенную наблюдаемую:

import {combineLatest} from 'rxjs';
import {tap} from 'rxjs/operators';

combineLatest(
    this.getListOne(),
    this.getListTwo()
).pipe(
   tap(([listOneResult, listTwoResult]) => {
     if(listTwoResult.length > 0){
       console.log("well done at least !");
     }
   })
)

Но я думаю, вам нужно больше узнать о наблюдаемых основах.Вот документы о Observables: https://angular.io/guide/observables

Answer 2

use forkJoin

import { forkJoin } from 'rxjs/internal/observable/forkJoin';  


forkJoin( this.getListOne(), this.getListTwo()).subscribe((result: any[]) => {
       console.log("well done at least !";
}

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