返回从rxjs/Subject(Observable.from vs Observable.of)数组的观测值

返回从rxjs/Subject(Observable.from vs Observable.of)数组的观测值

问题描述:

我正在使用WebSockets与后端WebApi进行通信。一切工作正常,除了我不能从我的服务返回我的自定义对象。返回从rxjs/Subject(Observable.from vs Observable.of)数组的观测值

我正在使用Angular 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?

如果你想提供一个撬棍,会更容易。到目前为止,我认为你是在混淆Observable.fromObservable.of

Observable.from

这个操作符遍历数组的元素,推动那些可观察的。这就是为什么你有型的兼容性问题: http://reactivex.io/documentation/operators/from.html

Observable.of

此操作创建一个从传递给它PARAMS可观察: 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] 
+0

你是正确的我们Observable.of解决了我的问题。但是,现在组件中的ngOninit中的订阅方法返回ScalarObservable。你知道我如何导入ScalarObservable吗? – Que