DOM视图未更新,角度不在区域

时间:2018-10-09 19:59:51

标签: javascript angular ionic-framework zone ngzone

我有一个与区域相关的问题,但我无法正常工作。我是新手,但是对JavaScript有一些基本的了解。

那是什么问题,我无法更新视图。

我使用用于离子BLE的第三方库,并在提供程序中使用

providers / communication-controller.ts

set_ble_tolisten(){
    //subscribe to receive notification, rx channel
    console.log('  set_ble_tolisten' + NgZone.isInAngularZone());
    this.ble.startNotification(this.peripheral_object.id, 
    this.TRANSPARANT_SERVICE, this.TX_CHARACTERISTIC).subscribe(
        (data) => this.handlereceiveddata(data),
        () => console.log('Unexpected Error', 'Failed to subscribe for 
            temperature changes')
    )
}

ble_communication_controller(port,command,payload,payloadsize,
callback) 
{
    //create buffer
    var BLE_Sendbuffer= new Int8Array(payloadsize+10);
    var package_index = 0;
    this.generatePacketID();

    this.ble_send_que.push({
        "packetid" : this.packetid,
        "action" :   callback
    });

    //Generate send message
    BLE_Sendbuffer[ some data]

    //send message
    this.ble.write(this.peripheral_object.id,this.TRANSPARANT_SERVICE, 
    this.RX_CHARACTERISTIC,BLE_Sendbuffer.buffer).then(
        () => console.log('ble message send'),
        e => console.log('ble oops')
    );
}

handlereceiveddata(buffer:ArrayBuffer){
    var int8View = new Int8Array(buffer);
    var ReceivedPacketID = 0;
    console.log('handlereceiveddata ' + NgZone.isInAngularZone());

    //first check the header
    if( ((int8View[0] * 0x100) + int8View[1]) === this.HEADER)
    {
        //retrieve packetid from received packet
        ReceivedPacketID = ((int8View[2] * 0x100) + int8View[3]);
        if(ReceivedPacketID === 0) {
            console.log('orgin io or rs232');
     } else {
        //find function based on packetid, and execute
        let index_findresult = this.ble_send_que.findIndex(value => 
        value.packetid  === ReceivedPacketID);

        if(index_findresult != -1)
        {
            this.ble_send_que[index_findresult].action(int8View);
        }
        //remove object from array
        this.ble_send_que.splice(index_findresult, 1);
      }
}

调用set_ble_tolisten()来遵守诺言。当接收到数据时,将调用handlereceiveddata()。

要传输数据,将调用ble_communication_controller(),此函数接受已存储的回调。当设备响应时,将调用handlereceivedata()。然后,调用存储在ble_communication_controller()调用中的回调

我创建了一个页面,配置,其中包含一个html和scss文件

configuration.ts

ionViewDidEnter() {
    this.communicationController.set_ble_tolisten();
   this.sync_device_gui('IO-1');
}

sync_device_gui(port){
    console.log('call in zone ' + NgZone.isInAngularZone());
    var io_port = 0;
    if(port === ‘IO-1')
    {
        io_port = 0x05;
    }

    if(port === 'IO-2')
    {
        io_port = 0x06;
    }

    this.communicationController.ble_communication_controller(io_port,
    GET_IO_STATE,0x00,0,this.update_state_gui);
}

update_state_gui(data){
    //rule below added as explained in first comment (location ngzone.run).
    this.zone.run(() => {
        console.log('repsonse in zone ' + NgZone.isInAngularZone());
        console.log('io port state ' + data);

        console.log('repsonse in zone ' + NgZone.isInAngularZone());
        if(data[8] == 0){
            this.relay_1_toggle = true;
            this.relay_2_toggle = true;
            console.log('state is false set :'+ this.relay_1_toggle + ' 
            state :' +    this.relay_2_toggle );
        }

        if(data[8] == 1){
            this.relay_1_toggle = false;
            this.relay_2_toggle = false;
            console.log('state is true set :'+ this.relay_1_toggle + ' 
            state :' +    this.relay_2_toggle );
       }
     //rule below added as explained in first comment.(location ngzone.run).
    });
       //ruke below added as explained in first commen. (location markForCheck())
       this.cd.markForCheck();



}

加载页面时,将调用ionViewDidEnter,问题是从提供程序中调用了update_state_gui。数据通过此功能接收。 isInAngularZone,告诉我它是错误的,超出区域。的 relay_1_toggle和relay_2_toggle是html中的切换按钮。

并且获取未更新,我尝试了ngzone.run或超时和markForCheck()。但它不起作用。

感谢您的帮助

0 个答案:

没有答案