typescript - example - RxJs Array of Observable to Array

rxjs map array

Question

Para una aplicación web escrita con Angular2 en TypeScript, necesito trabajar con RxJs Observable s.
Como nunca usé rxjs antes y soy nuevo en la programación reactiva en general, a veces tengo algunas dificultades para encontrar la manera correcta de hacer algunas cosas específicas.
Ahora estoy enfrentando un problema. donde tengo que convertir un Array<Observable<T>> en un Observable<Array<T>> .
Intentaré explicarlo con un ejemplo:
- Tengo un Observable , que me da una lista de Users ( Observable<Array<User>> )
- El User -class tiene una función getPosts devuelve un Observable<Array<Post>> .
- Necesito asignar el Observable<Array<User>> Observable<Array<Post>> a un Observable<Array<Post>> para evaluar todas las Post dentro de la función onNext .

Puedo asignar fácilmente desde Observable<Array<User>> a Observable<Array<Observable<Array<Post>>>> usando
map((result : Array<User>) => result.map((user : User) => user.getPosts()))
ans Puedo aplanar un Array<Array<Post>> en un Array<Post> .
Sin embargo, simplemente no puedo encontrar la manera correcta de asignar el Observable<Array<Observable<Array<Post>>>> Observable<Array<Array<Post>>> en un Observable<Array<Array<Post>>>
Hasta ahora combineLatest usado la función combineLatest junto con flatMap .
A mí me pareció que funcionaba y el editor que utilicé (editor Atom) no mostraba ningún error. Sin embargo ahora uso Netbeans, que me muestra un error en este código. También compilar el código usando "tsc" da como resultado errores.
El aspecto es el siguiente:

Argument of type ''(result: Post[]) => void'' is not assignable to parameter of type ''NextObserver<[Observable<Post>]> | ErrorObserver<[Observable<Post>]> | CompletionObserver<[...''.
Type ''(result: Post[]) => void'' is not assignable to type ''(value: [Observable<Post>]) => void''.  

Así que mi pregunta es:
¿Cómo puedo "aplanar" una Array de Observables en una Array ?

Answer 1

Aquí hay un código de ejemplo usando [email protected]

import { of, forkJoin} from ''rxjs'';
import { Observable } from ''rxjs''

const source:Array<Observable<String>> = [of(''A''), of(''B''), of(''C'') ];

forkJoin(source).subscribe( (x)=> console.log(x))

https://arrayofobservablesexamp.stackblitz.io

Answer 2

El operador flatMap permite hacer eso. No entiendo completamente lo que intentas hacer, pero intentaré dar una respuesta ...

Si quieres cargar todos los

getPostsPerUser() {
  return this.http.get(''/users'')
    .map(res => res.json())
    .flatMap((result : Array<User>) => {
      return Observable.forkJoin(
        result.map((user : User) => user.getPosts());
    });
}

Observable.forkJoin permite esperar a que todos los observables hayan recibido datos.

El código anterior asume que user.getPosts() devuelve un observable ...

Con esto, recibirás una gran variedad de publicaciones:

this.getPostsPerUser().subscribe(result => {
  var postsUser1 = result[0];
  var postsUser2 = result[1];
  (...)
});

Answer 3

Puede usar la función aplicar en el método rxjs que desee, así:

const source1 = Rx.Observable.interval(100)
  .map(function (i) { return ''First: '' + i; });

const source2 = Rx.Observable.interval(150)
  .map(function (i) { return ''Second: '' + i; });

const observablesArray = [source1, source2];

const sources = Rx.Observable.combineLatest
.apply(this, observablesArray).take(4)

/* or you can write it without "apply" this way:
const sources = Rx.Observable
                .combineLatest(...observablesArray)
                .take(4)
*/
sources.subscribe(
  (response) => {
    console.log(response);
  }
)

<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/5.0.1/Rx.min.js"></script>

Answer 4

Use forkJoin en esta matriz de observables, entonces será una matriz observable.