Angular 2 Call-Funktion nach jedem

Question

Ich mache einen API-Anruf in einem für jede Schleife in Winkel 2. Sobald alle Anrufe getätigt werden, möchte ich eine andere Funktion aufrufen, die den Benutzer über Router umleitet.

Dies ist, was ich bisher:

processData(){ 
var itemsToMove = this.myArray.length; 

this.myArray.forEach((item:any, index:any) => { 

let urlSearchParams = new URLSearchParams(); 

//code that sets up my urlSearchParam 
let body = urlSearchParams.toString(); 
itemsToMove--; 

this.putService.putObjectWithBody("myapicall", body).subscribe(data => { 
if (itemsToMove === 0) { 
this.redirect(); 
    } 
}); 
} 
} 

Gibt es eine bessere Art und Weise, dass ich sicherstellen kann, dass die Asynchron-Daten vor dem Aufruf this.redirect() verarbeitet werden? Dies funktioniert, aber es scheint ineffizient und unordentlich

Answer 1

Sie können forkJoin für diese Situation verwenden; Es führt alle beobachtbaren Sequenzen parallel aus, bevor es in den Callback geht. Dafür brauchst du eine Reihe von Observablen.

processData(){  
    var observableArray:any = []; 
    this.myArray.forEach((item:any, index:any) => { 

    let urlSearchParams = new URLSearchParams(); 

    //code that sets up my urlSearchParam 
    let body = urlSearchParams.toString(); 

    observableArray.push(this.putService.putObjectWithBody("myapicall", body)); 
    } 

    Observable.forkJoin(observableArray) 
     .subscribe(data => { 
      //this.myFunction(data[0], data[1]...); 
      this.redirect(); 
     }); 
} 

Ref: https://github.com/Reactive-Extensions/RxJS/blob/master/doc/api/core/operators/forkjoin.md