2017-10-14 21 views
0

我所有的数据发布位于/postsforkJoined观测不渲染输出的组件

当上传新的职位 - 帖子ID的也保存在/people/${userId}/posts

有一个getFeed(uri, fetchPostDetails = false)

当让所有帖子饲料(普通饲料页)它使用尿素posts & false为fetchPostDetails并检索bc所有的发布数据在那里。

问题 当检索用户帖子和发布数据时,它将获取用户的postsId,然后单独获取该帖子数据。所以它创建了多个observable,并返回一个forkJoined Observable在Component中呈现。无法让它呈现。

// 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 改变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); 
    }); 
+2

我想'query.map('应该是'query.switchMap(' –

+0

或'.flatMap' - 当你返回一个可观察的,你可能想,要解决的部分链接,不会作为值传递 – jonrsharpe

+0

地图部分似乎以我想要的方式工作,它提供了我需要的postId(post。$ key),我最终返回了Observable.forkJoin(源)我尝试了switchMap和flatMap他们导致它不会返回(记录)组件中的任何东西.ts – jamie

回答

1

您可以使用switchMap扩展您的流。更改为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); 
}); 
+0

那个diid不适合我 – jamie

+0

使用switchMap然后.zip运算符和dotdotdot参数模式结束了工作 - 更新了quesiton。 – jamie

+0

@jamie酷!很高兴听到 – Sajeetharan