forkJoined可观察对象未在组件中呈现输出

Question

All of my posts data is located at /posts

When uploading new posts - postId's are also saved in /people/${userId}/posts

Have a getFeed(uri, fetchPostDetails = false)

When getting All Posts feed (general feed page) it uses uri posts & false for the fetchPostDetails and retrieves bc all of the post data is there.

Problem When retrieving user posts and post data it will go to get user's postsId's and then get that post data individually. So it creates multiple observables's and returns a forkJoined Observable to render in the Component. Can't get it to render.

// located angularFireHelper  service 

getUserFeed(uri, fetchPostDetails = true) {
    let query = null;
    query = this.database.list(`/${uri}`,
        {
            query: {
                orderByKey: true,
            }
        });


    // IF not general feed fetchPostDetails
    if (fetchPostDetails) {
        return query.map((posts) => {
            console.log('User page so fetchPostDetails called');

            let source = [];
            source = posts.map(post => {
                // returns an Observable
                return this.database.object(`/posts/${post.$key}`);
            });

            return Observable.forkJoin(source);
        });
}


// userFeed.component.ts
ngOnInit() {
    this.componentName = 'user page component';
    this.user = this.afAuth.authState;
    this.getUsersFeedPosts();
}


getUsersFeedPosts() {
    this.user.subscribe(
        (value) => {
            console.log('value', value.uid);
            this.currentUser = value;
            this.afHelperService.getUserFeed(`people/${this.currentUser.uid/posts`).subscribe(
                (posts) => {
                        console.log('posts', posts);
                        this.userPosts = posts;
                    });
}


// userFeed.component.html
{{ userPosts | json }}


// In the console for posts (userPosts) it shows 

posts ForkJoinObservable {_isScalar: false, sources: Array(4), resultSelector: null}
enter code here
sources: (4) [FirebaseObjectObservable, FirebaseObjectObservable, FirebaseObjectObservable, FirebaseObjectObservable]

UPDATE Changing the angularFireHelperService code to the following worked. Not 100% sure why this is the only way I could get it to work. Seems like an antipattern using zip operator.

if (fetchPostDetails) {
    return query.switchMap((posts) => {
        console.log('User page so fetchPostDetails called');

        let source = [];
        source = posts.map(post => {
            // returns an Observable
            return this.database.object(`/posts/${post.$key}`);
        });

            return Observable.zip(...source);
    });

Answer 1

You sould extend your stream using switchMap. Change to query.switchMap

if (fetchPostDetails) {
        return query.switchMap((posts) => {
            console.log('User page so fetchPostDetails called');
            let source = [];
            source = posts.map(post => {
                // returns an Observable
                return this.database.object(`/posts/${post.$key}`);
            });
            return Observable.forkJoin(source);
 });