mqttコールバックスコープ外のアクセスクラスプロパティ

Question

npm-mqttを使用して、別のmqttブローカからデータを取得しています。

受信した各メッセージで、データをクラス/コンポーネント配列プロパティに追加したいとします。

しかし、クラスまたはそのプロパティにアクセスできません。代わりにスコープは、私はmqttクライアントクラスオブジェクトに入っていると言います。ここで

はコードの例です：

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); 
     client.on('message', this.onMessageArrived); 
     client.on('connect', this.onConnect); 
} 

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

私は、この範囲外の私のクラスのプロパティにデータをプッシュすることができますどのように？

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] 
    });