Angular 未在组件中呈现输出的对象

我所有的帖子数据都位于/posts

上载新帖子时，postId也保存在/people/${userId}/posts中

有一个getFeeduri，fetchPostDetails=false

当获取所有文章提要常规提要页面时，它使用uriposts&false作为fetchPostDetails，并检索所有文章数据

问题 在检索用户帖子和帖子数据时，它将获取用户的postsId，然后分别获取该帖子数据。因此，它创建多个可观察对象，并返回一个要在组件中呈现的可观察对象。无法使其渲染

// 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]

更新 将angularFireHelperService代码更改为以下代码有效。我不能100%确定为什么这是我唯一能让它工作的方法。似乎是使用zip运算符的反模式

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);
    });

---

您应该使用switchMap扩展流。改为

---

我猜query.map应该是query.switchMapOr.flatMap-当您返回一个可观察对象时，您可能希望它作为链的一部分进行解析，而不是作为值传递。映射部分似乎按照我想要的方式工作。它提供了postId的帖子。我需要$key。我最终将返回可观察的.forkJoinsource。我尝试了switchMap和flatMap，它们导致it不返回组件中的任何日志。t让它使用以下代码，但不完全确定这一点如何工作。据我所知，Zip运算符会减慢速度，因为它会等待观察对象完成，然后返回Switch map最终会帮助我解决问题，但仍然感觉我在使用Zip运算符并使用反模式，因为这是另一种让它工作的方式。使用switchMap then.Zip运算符和dotdot参数模式最终起作用-更新了问题。

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);
 });