J'ai besoin d'effectuer deux demandes HTTP. L'une après la première, car les valeurs fournies par la première sont utilisées pour rendre les autres appels HTTP.
i doit mettre à jour mon composant lorsque le premier http strud> est résolu. Et aussi, mis à jour lorsque le second HTTP est également résolu fort>. P> premier appel http obtient devine ce composant HTML: p> dans le contrôleur: p> nom code> et autre la marque code>. p> getVehicles(): Observable<Array<Vehicle>> {
return http.get("url")
.map(vehicle => <Vehicle>{id: vehicle.id, name: vehicle.name});
}
getVehicleBrand(ids: Array<String>): Observable<Array<VehicleBrand>> {
// build url according ids parameter
return http.get("url")
.map(brand => <VehicleBrand>{id: brand.vehicle_id, brand.name});
}
4 Réponses :
Vous pouvez faire quelque chose comme ceci:
http.get("url").pipe(
map(vehicle => <Vehicle>{id: vehicle.id, name: vehicle.name})
tap(vehicle => { this.vehicles$.next(vehicle); })
switchMap(vehicle => this.getVehicleBrand([vehicle.id]));
)
Vous pouvez utiliser contrôleur async attendre voici l'exemple.
Si vous souhaitez retourner des observables de manière séquentielle, vous pouvez utiliser RXJS's Mergemap pour mapper sur les valeurs observables du à partir de là, vous pouvez correspondre à la marque avec les véhicules respectifs. P> sur votre composant.ts, c'est ainsi que cela ressemblera à p> GoveHicles () CODE> dans un interne observable, pour obtenir la liste des identifiants. Ensuite, nous appelons la méthode getvehiclebrand () code> à partir du service, et les observables sont renvoyés dans l'abonnement () sur la ligne suivante. ngOnInit() {
this._vehicleService.getVehicles(["1", "2"]).pipe(
mergeMap(vehicles => {
const vehicleIdList: string[] = vehicles.map(vehicle => vehicle.id);
return this._vehicleService.getVehicleBrand(vehicleIdList);
})
).subscribe(res => {
// continue the rest
})
}
Il me manque qu'un code pour obtenir un composant est mis à jour lorsque getvehicles est résolu ...
@Jordi Désolé, vous voulez dire quelque chose comme la mise à jour ceci.vehicles ? Telles que chaque objet dans véhicules contiennent également le nom de la marque?
La fusion des données entre les demandes ne devrait pas être la responsabilité de la composante. C'est ce que les services sont destinés.
Exemple de ce qu'un tel service pourrait regarder (n'hésitez pas à le personnaliser en fonction de vos propres besoins bien sûr): P>
@Component({
selector: 'app-vehicles',
templateUrl: './vehicles.component.html',
styleUrls: ['./vehicles.component.css']
})
export class VehiclesComponent {
public vehicles$: Observable<Vehicle[]> = this.vehiclesService.getVehicles();
constructor(private vehiclesService: VehiclesService) {}
}
Juste pour vérifier,
getvehiclebrand () sera appelé juste aprèsgetvehicles () ?Oui, puisque
getvehiclebrand () a besoingetvehicles () réponsesvéhicule.id ...getvehicles () n'a pas de paramètres, mais vous l'appelezgetShicles (["1", "2"]) . Donc, ça n'a pas de sens. Pour moi, ce n'est pas clair ce que vos critères finaux s'attendent, il serait donc utile si vous fournissez cela - quel type ils prennent et quel type ils reviennent. Sinon, imo de répondre à cela est plus comme devinerPardon. Résolu;)