forkJoined 관찰 가능한이

Question

새 게시물을 업로드 할 때 데이터가 /posts

에 위치 내 게시물의 모든 구성 요소에 출력을 렌더링하지 피드 (일반 피드 페이지)는 fetchPostDetails에 대해 거짓으로 posts & false를 사용하고 bc에서 모든 게시물 데이터를 검색합니다.

문제 사용자 게시물을 검색하고 데이터를 게시 할 때 사용자의 게시물 ID를 얻고 해당 게시물 데이터를 개별적으로 가져옵니다. 그래서 여러 개의 관찰 가능 객체를 생성하고 컴포넌트에서 렌더링하기 위해 forkJoined Observable을 반환합니다. 그것을 렌더링 할 수 없습니다.

// 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 % 확신하지 못한다. 지퍼 연산자를 사용하여 반 패턴처럼 보입니다.

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

switchMap을 사용하여 스트림을 확장해야합니다. 나는`query.map를 추측 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); 
});