Return 来自 rxjs/Subject 的数组的 Observable（Observable.from 对比 Observable.of）

Question

我正在使用 WebSockets 与后端 WebApi 进行通信。一切正常，除了我无法从我的服务中 return 我的自定义对象。

我正在使用 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$;
  }    
}

我怎样才能 return 从服务中观察到？

Answer 1

如果你能提供一个plunker会更容易。到目前为止，我认为您混淆了 Observable.from 和 Observable.of:

Observable.from

此运算符正在遍历您的数组元素并将它们推送到 Observable。这就是你遇到类型兼容性问题的原因： http://reactivex.io/documentation/operators/from.html

Observable.of

这个运算符从传递给它的参数创建 Observable： 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]

Return 来自 rxjs/Subject 的数组的 Observable（Observable.from 对比 Observable.of）

Return Observable of arrays from rxjs/Subject (Observable.from vs. Observable.of)

observable

rxjs5

angular