Subject<MessageEvent> 类型上不存在专有“地图”

Posted 2023-02-16

【中文标题】Subject<MessageEvent> 类型上不存在专有“地图”

【英文标题】：Propriety 'map' does not exist on type Subject<MessageEvent>'

【发布时间】：2019-05-05 13:31:19

【问题描述】：

我是 RxJs 的新手，我正在努力设置一个简单的客户端 websocket。 我关注了这个tutorial，但在ticker.service.ts 中出现以下错误：

“主题”类型上不存在专有“地图”

websocket.service.ts

import Injectable from '@angular/core';

import Observable, Observer, Subject from 'rxjs';
import LiveTrade from '../models/models';

const CHAT_URL = 'ws://localhost:8888';

@Injectable(
    providedIn: 'root'
)

export class WebsocketService 
    public tickerStreamObservableSubject: Subject<LiveTrade>;
    private msgEventStreamObservableSubject: Subject<MessageEvent>;

    public getObservableTicker(url): Subject<MessageEvent> 
        if (!this.msgEventStreamObservableSubject) 
            this.msgEventStreamObservableSubject = this.createObservable(url);
            console.log('Successfully connected: ' + url);
        
        return this.msgEventStreamObservableSubject;
    

    private createObservable(url): Subject<MessageEvent> 
        const ws = new WebSocket(url);

        const observable = Observable.create((observer: Observer<MessageEvent>) => 

            ws.onmessage = observer.next.bind(observer);
            ws.onerror = observer.error.bind(observer);
            ws.onclose = observer.complete.bind(observer);
            return ws.close.bind(ws);

        );

        const innerObserverOfSubject: Observer<Object> = 
            next: (data: Object) => 
                console.log('next called on innerObserverOfSubject')
                if (ws.readyState === WebSocket.OPEN) 
                    ws.send(JSON.stringify(data));
                
            ,
            error() 
            ,
            complete() 
            ,
        ;
        return Subject.create(innerObserverOfSubject, observable);
    

    constructor() 
    

ticker.service.ts

import Injectable from '@angular/core';
import Observable, Subject from 'rxjs';
import WebsocketService from './websocket.service';
import LiveTrade from '../models/models';

const CHAT_URL = 'ws://localhost:8888';

export interface LiveTrade 
    id: string; //  Trade unique ID.
    amount: string; //  Trade amount.
    amount_str: string; //  Trade amount represented in string format.
    price: string; //   Trade price.
    price_str: string; //   Trade price represented in string format.
    type: string; //    Trade type (0 - buy; 1 - sell).
    timestamp: string; //   Trade timestamp.
    microtimestamp: string; //  Trade microtimestamp.
    buy_order_id: string; //    Trade buy order ID.
    sell_order_id: string; //   Trade sell order ID.



@Injectable(
    providedIn: 'root'
)
export class TickerService 
    public tickerStreamObservableSubject: Subject<LiveTrade>;
    public msgEventStreamObservableSubject: Subject<MessageEvent>;

    constructor(wsService: WebsocketService) 

        this.msgEventStreamObservableSubject = wsService.getObservableTicker(CHAT_URL).map(
            (response: MessageEvent): LiveTrade => 
                let data = JSON.parse(response.data);
                return data;
            
        );
    

【问题讨论】：

github.com/ReactiveX/rxjs/blob/master/doc/pipeable-operators.md

将地图添加到 rxjs import map from 'rxjs/operators';中的导入

【参考方案1】：

这应该可以修复您的代码：

this.msgEventStreamObservableSubject = wsService
  .getObservableTicker(CHAT_URL)
  .pipe(
    map(
      (response: MessageEvent): LiveTrade => 
        let data = JSON.parse(response.data);
        return data;
      
    )
  );

另外，请确保导入：

import  map  from 'rxjs/operators';