订阅Observable,无法获得价值

时间:2017-11-23 03:46:53

标签: angular

订阅Observable,无法获取值。

当前行为

  • 我运行一个nodejs服务器名称为N.它提供数据。然后,我运行一个角应用程序名称A。
  • A和N建立套接字连接。行为客户。 N act server。
  • N有一项常规任务是将数据发送到客户端A
  • 在A中,我使用服务来接收数据。可以得到它。
  • 服务注入一个组件,但无法获取组件中的订阅数据。

预期行为

  • 可以在组件中获取订阅数据。

使用说明书轻微复制问题

  • 角度服务:

    createObservableSocket(url: string, id: number): Observable<any> {   
      let a = new Observable<string>(
      observer => {
        this.ws.onmessage = (event) => {
          observer.next(event.data);
          console.log('event data:', event.data); // event data: [{"productId":1,"bid":3616.8217831199527}]
        }
        this.ws.onerror = (event) => observer.error(event);
        this.ws.onopen = (event) => this.sendMessage({productId: id});
        this.ws.onclose = (event) => observer.complete();
      }
    );
    console.log('a:', a); // [Observable object]
    let b = a.map(message => {
      JSON.parse(message);
    });
    console.log('b:', b); // [Observable object]
    return b;
    

    }

    sendMessage(message: any) {
      console.log('client ws service msg:', JSON.stringify(message)); //client ws service msg: {"productId":1}
      this.ws.send(JSON.stringify(message)); 
    }
    
  • 角度分量

    watchProduct() {
      this.isWatched = !this.isWatched;
    
      this.wsService.createObservableSocket('ws://localhost:8085', 
      this.product.id)
        .subscribe(
          products => {
            console.log('component received:', products); //component  received: undefined
            let product = products.find( p => p.productId === this.product.id);
            this.currentBid = product.bid;
          }
        );
      }
    

环境


Angular version: 4.2.4

Browser:
- [ ] Chrome (desktop) version 60.0.3112.101

For Tooling issues:
- Node version: v8.1.0
- Platform: Windows 10

其他:

  • 为什么不能订阅数据,请帮帮我。谢谢!

1 个答案:

答案 0 :(得分:0)

您需要return数据:

所以改变这个:

a.map(message => {
  JSON.parse(message);
});

致:

a.map(message => {
  return JSON.parse(message);
});

// OR

a.map(message => JSON.parse(message));