Angular 从rxjs/主题返回阵列的可观测值(可观测值与可观测值)

Angular 从rxjs/主题返回阵列的可观测值(可观测值与可观测值),angular,observable,rxjs5,Angular,Observable,Rxjs5,我正在使用WebSocket与后端WebApi通信。一切正常,但我无法从服务中返回自定义对象 我使用的是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 cod

我正在使用WebSocket与后端WebApi通信。一切正常,但我无法从服务中返回自定义对象

我使用的是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$;
  }    
}
//我的组件中的ngInit
恩戈尼尼特(){
this.modelsSubscription=this.mainService.getModels().subscribe(models=>{
这个。模型=模型;
});
//这是我的服务代码
从'@angular/common/http'导入{HttpClient};
从“@angular/core”导入{Injectable};
从'rxjs/Rx'导入{Observable};
从'rxjs/Subject'导入{Subject};
从“../../environments/environment”导入{environment};
从“./websocket.service”导入{WebsocketService};
从“../models/my Model”导入{MyModel};
从“../globals/application error”导入{ApplicationError};
@可注射()
出口级主服务{
信息$:可观察;
私人信息:主题;
私有webapirl:string;
私有wsapirl:string;
构造函数(私有http:HttpClient,私有wsService:WebsocketService){
this.webapirl=environment.webapirl+'/api/mainscreen/';
this.wsapirl=this.webapirl.replace('http:','ws:');
}
断开连接(){
这个.wsService.disconnect();
}
getModels(){
this.messages=this.wsService
.connect(`${this.wsapirl}GetModels`)
.map((响应:MessageEvent):可观察=>{
const data=JSON.parse(response.data);
const myModels=MyModel.fromArray(数据);

//返回Observable.from(myModels)/如果您提供一个plunker会更容易。到目前为止,我认为您混淆了
Observable.from
Observable.of

可观察到。从

此运算符正在迭代您的数组元素并将其推送到可观察对象。这就是您遇到类型兼容性问题的原因:

可观察的

此运算符通过传递给它的参数创建可观察的:

总结。您应该更改:

return Observable.from(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));
致:

示例:

return Observable.from(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]

您使用Observable.of解决了我的问题。但是,现在组件上ngOninit中的subscribe方法返回ScalarObservable。您知道如何导入ScalarObservable吗?