rxjs/Subject（Observable.from対Observable.of）からの配列の復帰

Question

私はバックエンドWebApiと通信するためにWebSocketを使用しています。私のサービスから私のカスタムオブジェクトを返すことはできませんが、すべてがうまくいきます。

私は角度4.3.4とrxjs 5.4.3を使用しています。

//ngInit from my component 
ngOnInit() { 
    this.modelsSubscription = this.mainService.getModels().subscribe(models => { 
     this.models = models; 
    }); 

//here's code from my service 
import { HttpClient } from '@angular/common/http'; 
import { Injectable } from '@angular/core'; 
import { Observable } from 'rxjs/Rx'; 
import { Subject } from 'rxjs/Subject'; 
import { environment } from '../../environments/environment'; 

import { WebsocketService } from './websocket.service'; 
import { MyModel} from '../models/my-Model'; 
import { ApplicationError } from '../globals/application-error'; 


@Injectable() 
export class MainService { 
    messages$: Observable<MyModel[]>; 

    private messages: Subject<MyModel[]>; 
    private webApiUrl: string; 
    private wsApiUrl: string; 

    constructor(private http: HttpClient, private wsService: WebsocketService) { 
    this.webApiUrl = environment.webApiUrl + '/api/mainscreen/'; 
    this.wsApiUrl = this.webApiUrl.replace('http:', 'ws:'); 
    } 

    disconnect() { 
    this.wsService.disconnect(); 
    } 

    getModels() { 
    this.messages = <Subject<MyModel[]>>this.wsService 
     .connect(`${this.wsApiUrl}GetModels`) 
     .map((response: MessageEvent): Observable<MyModel[]> => { 
     const data = JSON.parse(response.data); 
     const myModels = MyModel.fromArray(data); 
     // return Observable.from(myModels) // <-- throws error Type 'Observable<MyModel>' is not assignable to type 'Observable<MyModel[]>' 
     // return myModels; // <-- throws error myModels[] is not assignable to Observable<myModels[]> 
     return new Observable<MyModels[]>(observer => { 
      observer.next(myModels); // <-- never gets called 
      observer.complete(); 
     }); 
     }) 
     .catch((error: any) => 
     Observable.throw(new ApplicationError(error)) 
    ); 

    this.messages$ = this.messages.asObservable(); 
    return this.messages$; 
    }  
} 

サービスからObservableを返却するにはどうすればよいですか？

Answer 1

プランナーを提供する方が簡単です。これまでのところ私は、あなたがObservable.fromとObservable.ofを混乱していることを考える：

Observable.from

をこの演算子は、あなたの配列の要素を反復して観察可能にそれらをプッシュしています。 http://reactivex.io/documentation/operators/from.html

この演算子はそれに渡されたのparamsから観察可能な作成

Observable.of： http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#static-method-of

要約それはあなたがタイプの互換性の問題を得た理由です。あなたは変更する必要があります。

return Observable.from(myModels) 

へ：

return Observable.of(myModels) 

例：

var myModels = ["a", "b", "c", "d"] 
Observable.from(myModels).subscribe(value => console.log("value is: " + value)); 
Observable.of(myModels).subscribe(value => console.log("value is: " + value)); 

出力は次のようになります。

value is: a 
value is: b 
value is: c 
value is: d 
value is: [a, b, c, d]