Angular 实时更新角度传感器中的数据

我对我的组件进行了如下调用：

在父组件（其部分模板如上所示）中，实时服务正在发送websocket消息，在我的websocket消息处理程序中，我获取消息并从中提取数据，并将新数据存储在

dataValues

中：

public subscribe（）{
this.rtdSubscription=this.rtdService.createObservableScocket（）.subscribe(
{
下一步：（消息）=>{
//当消息传入时，如果我们有处理程序，请调用该处理程序。
const{payload，id}=JSON.parse（message）；
if（this.messageHandlers[id]）{
this.messageHandlers[id].call（this，payload）；//消息处理程序存储新的数据值
}
},
错误：err=>console.warn（err），
}
);
}

以下是来自服务的方法：

public createObservableScocket（）：可观察{
const url:string=environment.rtdServer；
this.ws=新的WebSocket（url）；
返回新的可观测数据(
观察员=>{
this.ws.onmessage=（event）=>observer.next（event.data）；
this.ws.onerror=（事件）=>observer.error（事件）；
this.ws.onclose=（事件）=>observer.complete（）；
return（）=>this.ws.close（1000，“用户断开连接”）；
}
);
}

在模板中，如何使

[data]=“dataValues”

在模板中每次更改

dataValues

时更新？我知道这和可观察到的东西有关……但这些东西让我的大脑非常痛苦

更新：我已经将其添加到我的组件构造函数中

构造函数（私有rtdService:RealtimedataService）{
this.liveData=新的可观察对象（observer=>
observer.next（this.dataValues）
)
}

并将模板更改为

[data]=“liveData|async”

现在的图表显示“没有可用的数据”，我相信这是jquery库的说法，很明显。这意味着我在创建

liveData

observable时迈出了正确的第一步。我只是还没弄明白怎么把东西放进去。我怀疑

liveData

实际上应该观察到调用我当前拥有的回调/处理程序的东西

有人问我当前在哪里更新数据值：

handleNewStreamFrame（有效载荷）{
//如果消息用于不同的流，请退出。
if（payload.streamGuid！==this.streamGuid）{
返回；
}
//存储新数据
//如果我们没有停顿，
//或者我们要求更新。
如果（！this.paused | | this.hasRequestedUpdatedRange）{
this.dataValues=payload.dataPoints；
}
//更新图形的范围
//如果我们收到这个帧是为了响应一个新范围的请求。
if（this.harequestedUpdatedRange）{
this.hasRequestedUpdatedRange=false；
常数{xRange，yRange}=有效载荷；
此.updateRangeFromFrame（xRange，yRange）；
}
这个.draw（）；
}

---

这是一个websocket消息处理程序。注意末尾的

draw（）

调用：该组件最初使用自己的画布来显示图形，如您所见，调用画布绘制方法本身。现在，

appjq图表

（我为jquery库jqChart编写的一个包装器）正在用我发送的数据进行绘图。换句话说，我最初的实现是拖延学习如何正确完成这一切的一个好方法

也许您可以查看DOM管道

[data]=“dataValues | async”

。不确定它的语法是否正确，但只是指向某个方向。我认为与其使用

dataValues

，不如添加

Observable

，我们可以看看您是如何实际更新

dataValues

，Updated@ConnorsFan@JonathanTuzman我不太明白为什么有一个

websocketobservable

和另一个

Observable

我不担心这一点（我也不知道你的意思）父组件中的数据更新工作得很好，只是获取它的问题，对子组件异步/更新/观察。