Bienvenido a proyecto online, aquí hallarás la respuesta de lo que buscas.
Solución:
Última actualización: mayo de 2020.
combineLatest(observables)
De la documentación reactivaX:
Cada vez que un Observable de entrada emite un valor, calcula una fórmula utilizando los valores más recientes de todas las entradas y luego emite la salida de esa fórmula.
(Actualización: febrero de 2021):
// Observables to combine
const name$ = this._personService.getName(id);
const document$ = this._documentService.getDocument();
name$.combineLatest(document$, (name, document) => name, document)
.subscribe(pair =>
this.name = pair.name;
this.document = pair.document;
this.showForm();
)
(sintaxis alternativa): combineLatest(observables)
// Observables to combine
const name$ = this._personService.getName(id);
const document$ = this._documentService.getDocument();
combineLatest(name$, document$, (name, document) => (name, document))
.subscribe(pair =>
this.name = pair.name;
this.document = pair.document;
this.showForm();
)
zip vs combineÚltimo
(Actualización: octubre de 2018)
Anteriormente sugerí el uso de zip método. Sin embargo, para algunos casos de uso, combineLatest tiene algunas ventajas sobre zip. Por eso es importante entender las diferencias.
CombineLatest emite los últimos valores emitidos de los observables. Tiempo zip método emite los elementos emitidos en secuencia pedido.
Por ejemplo, si el observable #1 emite su 3ro el elemento y el observable #2 ha emitido su 5to ít. El resultado usando zip el método será el 3ro valores emitidos de ambos observables.
En esta situación, el resultado usando combineLatest será el 5to y 3ro. que se siente más natural.
Observable.zip(observables)
(Respuesta original: julio de 2017) El método Observable.zip se explica en la documentación de reactiveX:
Combina varios Observables para crear un Observable cuyos valores se calculan a partir de los valores, en orden, de cada uno de sus Observables de entrada.
// Observables to combine
const name$ = this._personService.getName(id);
const document$ = this._documentService.getDocument();
Observable
.zip(name$, document$, (name: string, document: string) => (name, document))
.subscribe(pair =>
this.name = pair.name;
this.document = pair.document;
this.showForm();
)
una nota al margen (se aplica a ambos métodos)
El último parámetro, donde hemos proporcionado una función, (name: string, document: string) => (name, document) es opcional. Puede omitirlo o hacer operaciones más complejas:
Si el último parámetro es una función, esta función se utiliza para calcular el valor creado a partir de los valores de entrada. De lo contrario, un array de los valores de entrada se devuelve.
Así que si te saltas la última parte, obtienes un array:
// Observables to combine
const name$ = this._personService.getName(id);
const document$ = this._documentService.getDocument();
Observable
.zip(name$, document$)
.subscribe(pair =>
this.name = pair['0'];
this.document = pair['1'];
this.showForm();
)
Utilizar forkJoin() método de observables. Consulta este enlace como referencia
De los documentos RXJS
Este operador se usa mejor cuando tiene un grupo de observables y solo se preocupa por el valor final emitido de cada uno. Un caso de uso común para esto es si desea emitir múltiples solicitudes en la carga de la página (o algún otro evento) y solo desea tomar medidas cuando se haya recibido una respuesta para todos. De esta manera, es similar a cómo podría usar Promise.all
forkJoin([character, characterHomeworld]).subscribe(results =>
// results[0] is our character
// results[1] is our character homeworld
results[0].homeworld = results[1];
this.loadedCharacter = results[0];
);
Código tomado de: https://coryrylan.com/blog/angular-multiple-http-requests-with-rxjs
Los operadores RxJS para Dummies: forkJoin, zip, combineLatest, withLatestFrom me ayudaron mucho. Como su nombre indica, describe los siguientes operadores de combinación:
- TenedorÚnete
- Código Postal
- combinarÚltimo
- conLatestFrom
Cualquiera de ellos puede ser lo que buscas, depende del caso. Consulte el artículo para obtener más información.
No se te olvide recomendar este tutorial si te fue útil.