観測可能なフォーク結合が機能しない

Question

H、rxJs observableを正しく使用する上で問題があります。私の必要条件は、ブックにあるすべてのチャットルームを取得することです（部屋が利用できない場合は、新しいチャットルームを1つ作成してください）。 以下のコードを使用しています。

私のチャットコンポーネント

@Component({ 
selector: 'chat', 
templateUrl: './chat.component.html' 
}) 
export class ChatComponent implements OnInit { 
this.selectbookStream.subscribe(bookId=> 
{ 
this.chatService.getRooms(book id) 
    .subscribe(rooms => { 
     console.log("in chat component"); 
     console.log(rooms); 
     this.rooms = rooms; 
    }); 
}) 
} 

マイチャットサービス

@Injectable() 
export class ChatService { 
    public getRooms(bookID) { 
     console.log("in get rooms") 
     return this.thisPartyChatService.createRooms(bookID).map(r=>r) 

    } 
} 

サードパーティチャットサービス

public createRooms(bookID: string): Observable<any> { 
let rooms = []; 

this.modelService.getBookDetails(bookID).subscribe(book=> { 

    this.getRoom(book.name).subscribe(r => { 
    if (Object.keys(r).length === 0) { 
    rooms.push(this.createRoom(book.name).map(res=>res)) 
    } else { 
    // rooms.push(Observ) 
     rooms.push(Observable.of({ 
     'id': r.id, 
     'type': r.type, 
     'title': r.title, 
     'name': r.title, 
     'created': r.created 
     }) 
    ) 
    } 

    }) 

}); 
return Observable.forkjoin(rooms); 

} 


public createRoom(bookID: string): Observable<any> { 
    return this.http.post(this.apiUrl.room, { 'title': bookID, 'teamId': 
     teamId }, this.generateHeader()).map(res => res.json); 
    } 

    public getRoom(modelId: string): Observable<any> { 
    this.roomTitle = modelId; 
    // search all rooms in CISCO sparck and match with modelId 
    return this.http.get(this.apiUrl.room, this.generateHeader()) 
     .map(this.findRoom); 
    } 


    private findRoom(res: Response) { 
    let body = res.json(); 
    let room: any; 
    body.items.forEach(element => { 
    if (element.title == this.roomTitle) 
    return element; 
    }); 
    return {}; 
} 

Answer 1

それはあなたが呼び出す必要があるため、サービスが呼び出されていないこともありそれは関数の内部にあります。たとえば、コンポーネントimplements OnInitはそうあなたがその関数内で自分のサービスコールを入れて、コンポーネントは、このように終わるかもしれない：

@Component({ 
    selector: 'chat', 
    templateUrl: './chat.component.html' 
}) 
export class ChatComponent implements OnInit { 

    public rooms = []; 

    public ngOnInit() { 

     this.selectbookStream.subscribe(bookId => { 
      this.chatService.getRooms(book id) 
       .subscribe(rooms => { 
        console.log("in chat component"); 
        console.log(rooms); 
        this.rooms = rooms; 
       }); 
     }) 
    } 
} 

Answer 2

私はこの問題はcreateRooms()方式の構造であると思います。基本的には、以下の持っている：

public createRooms(bookID: string): Observable<any> { 
    let rooms = []; 

    this.modelService.getBookDetails(bookID).subscribe(book => { 
     this.getRoom(book.name).subscribe(...); 
    }) 

    return Observable.forkjoin(rooms); 
} 

ネスティングsubscribe()呼び出しは常に警告サインです。

getBookDetailsまたはgetRoomは非同期関数なので、コードがreturn Observable.forkjoin(rooms)になると、roomsの配列は常に空になります。

コードを再構成することをお勧めします。たとえば、このように（私はそれをテストしなかったが、あなたはポイントを得るべきである）。

public createRooms(bookID: string): Observable<any> { 
    return this.modelService.getBookDetails(bookID) 
     .concatAll() 
     .concatMap(book => this.getRoom(book.name)) 
     .concatMap(room => { 
      if (Object.keys(r).length === 0) { 
       return Observable... 
      } else .... 

     }); 
}