Angolare 4 FormArray con ritardo nel servizio http Observable [duplicato] - angolare, rxjs, osservabile

Devo visualizzare e modificare l'elenco degli articoli restituitida un servizio http in forma angolare 4 reattiva. Dal momento che ho un elenco indefinito, ho bisogno di FormArray. ma il mio problema è il mio servizio http che restituisce un osservabile non sta fornendo dati quando cerco l'array. Quindi, quando eseguo il ciclo attraverso il set di dati restituito, viene generato l'errore "Impossibile leggere la proprietà x di undefined". Sono nuovo di Osservabile, quindi non sono riuscito a capire la soluzione. Potresti per favore aiutare?

servizio:

getCountries() : Observable<Country[]>{
console.log("In getCountries");
return this.http
.get(this.apiUrl)
.map(response => <Country[]>response.json());
}

Componente:

ngOnInit(){
this.getCountries();
this.initForm();
this.patchForm();
}

getCountries(){
this.countryService.getCountries()
.subscribe( response => {
this.countries = response;
console.log("response");
console.log(response);
},
error => {
console.log("error");
console.log(error);
});
console.log("this.countries");
console.log(this.countries);
}

patchForm(){
const control = <FormArray>this.countryForm.controls.countries;
console.log("in patchForm()");
console.log(this.countries);
this.countries.forEach(element => {
control.push(this.formBuilder.group({
id: element.id,
name: element.name,
deleted: element.deleted
}));
});
}

la risposta di getCountries () viene visualizzata alla fine nella console del browser. Sembra che qui manchi un concetto asincrono.

risposte:

Devi muoverti patchForm all'interno success callback del tuo Observable

ngOnInit(){
this.initForm();
this.getCountries();
}

getCountries(){
this.countryService.getCountries()
.subscribe( response => {
this.countries = response;
this.patchForm();
console.log("response");
console.log(response);
},
error => {
console.log("error");
console.log(error);
});
console.log("this.countries");
console.log(this.countries);
}