可观察流上的地图未调用功能

Question

I have an array of Observables that I create by pushing HTTP requests into an Observable array.

Once these requests are done, I forkJoin the collection of Observables and then from there, I'd like to then loop over this collection, perform some function on each item, and then finally, execute one last method.

I have something similar to this:

// Firstly, get all of the items
private _getItems(): Observable<MyItems[]> {
    let items: Observable<MyItems>[] = [];

    Object.keys(this._items).map(item => {
        items.push(this.service.getItemState(item))
    });

    return Observable.forkJoin(items);
}

---

// Secondly, loop through items and perform function
this._getItems()
    .map(items => items.map(item => {
        this._setState(item);
    }))
    // Finally, do my last method
    .subscribe(() => {
        this._prepareItems();
    });
}

I'm not sure of why, but this._setState(item) is never being called. Is this the right way to go about doing this?

Thanks

Answer 1

At first forkJoin is a good choice since it waits for all of your http-requests to complete. But im not sure if your forEach on the object is working? Wouldn't it be like this:

Object.keys(this._items).map((key, index) => {
     items.push(this.service.getItemState(this._items[key]))
});

On your second example you create a new observable by using map with the forkJoin observable as source. You use map but dont map anything so instead use tap() (was called do() on before RxJS 5.5)

I would highly recommend you to insert a console.log on nearly each line of your code and see if its working correctly. Is the forEach on object working? Is _getItems() every emitting something? (use do/tap for console.log)

Btw you should not call everything "item". this._setState(item); is probably more something like this._setState(itemState); isnt it?

Answer 2

This should work, regardless of the version of Angular / RxJS that you are using.

 // Your code that isn't working: /*// Firstly, get all of the items private _getItems(): Observable<MyItems[]> { let items: Observable<MyItems>[] = []; Object.keys(this._items).map(item => { items.push(this.service.getItemState(item)) }); return Observable.forkJoin(items); } // Secondly, loop through items and perform function this._getItems() .map(items => items.map(item => { this._setState(item); })) // Finally, do my last method .subscribe(() => { this._prepareItems(); }); }*/ // Code rewritten (Angular 2-4 / RxJS 2-4): import { Observable } from 'rxjs'; import 'rxjs/add/operator/map'; private _getItems(): Observable<MyItems[]> { return Observable.forkJoin( Object.keys(this._items) .map(item => this.service.getItemState(item)) ); } this._getItems() .map(items => items.map(item => { this._setState(item); return item; })) .subscribe( item => this._prepareItems(), err => console.error(err) ); // Code rewritten (Angular 5+ / RxJS 5+): import { Observable } from 'rxjs'; import { tap } from 'rxjs/operators'; private _getItems(): Observable<MyItems[]> { return Observable.combineLatest( Object.keys(this._items) .map(item => this.service.getItemState(item)) ); } this._getItems() .pipe( tap(items => items.map(item => this._setState(item))) ) .subscribe( item => this._prepareItems(), err => console.error(err) );