Question

我正在使用npm-mqtt从另一个mqtt代理获取数据。

在收到的每条消息上，我想将数据添加到类/组件数组属性中。

但我无法访问该类或其属性。相反，范围说我在mqtt客户端类对象中。

这是一个代码示例：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="valor">

<!--
<button class="changval" onclick="$('#valor').val((parseInt($('#valor').val())||0)+1);">Plus</button>
<button class="changval" onclick="$('#valor').val((parseInt($('#valor').val())||0)-1);">Minus</button>

<button class="changval" onclick="$('#valor').val((parseInt($('#valor').val())||0)-1);">Minus 2</button>
-->

<button class="changval" data-sign="1">Plus</button>
<button class="changval" data-sign="2">Minus</button>

如何将数据推送到此范围之外的class属性？

Answer 1

使用.bind(this)，您可以确保在调用事件时this不会发生变化。

您的代码现在看起来像：

this.mydata: Array<any> = [];

private fetchWithMqtt(){
    var client = mqtt.connect('ws://' + this.ip + ":" + Number(this.port) + "/mqtt");
    // set callback handlers
    client.on('close', this.onConnectionLost.bind(this));
    client.on('message', this.onMessageArrived.bind(this));
    client.on('connect', this.onConnect.bind(this));
}

private onMessageArrived(topic, message) {
    let tempDataset = JSON.parse(message).dataset;
    this.mydata.push({
        x: tempDataset[0],
        y: tempDataset[1]
    });

但是，如果您需要访问事件处理程序中的client，该怎么办？那么你仍然可以使用bind，但是将mydata添加到事件处理程序并将其作为参数接受。

您的代码现在变为：

this.mydata: Array<any> = [];

private fetchWithMqtt(){
    var client = mqtt.connect('ws://' + this.ip + ":" + Number(this.port) + "/mqtt");
    // set callback handlers
    client.on('close', this.onConnectionLost.bind(client, this.mydata));
    client.on('message', this.onMessageArrived.bind(client, this.mydata));
    client.on('connect', this.onConnect.bind(client, this.mydata));
}

private onMessageArrived(mydata, topic, message) {
    let tempDataset = JSON.parse(message).dataset;
    mydata.push({ // this == client
        x: tempDataset[0],
        y: tempDataset[1]
    });

访问mqtt回调范围之外的类属性

1 个答案: