Ionic 3 и Ngzone () не работают - PullRequest
Новая
       11

Ionic 3 и Ngzone () не работают

0 голосов
/ 15 мая 2018


Я хочу выполнить какое-либо действие после установления соединения Bluetooth и наоборот.
Обработаны сценарии для подключения, добавлен также обработчик успеха и ошибок, а также установлен флаг True и False в этих функциях-обработчиках.
Я напечатал это значение с помощью console.log, оно изменяется в файле компонента, но не отражается в HTML.
Я пытался использовать ngZone , но он не работает.
Код дескриптора успеха и ошибки:

BluetoothService 

import { Injectable } from "@angular/core";
import { BLE } from '@ionic-native/ble';


@Injectable()
export class BlueToothService {

    constructor(private ble: BLE){
    }

     public connect = (deviceId, onConnect, onFailure) => {
        this.ble.isConnected(deviceId)
            .then(response => {
                console.log("BlueToothService :: isConnected Function :: success :: device----", response);
                onConnect(response);
            },
            error =>  {
                this.ble.connect(deviceId)
                    .subscribe(response => {
                        console.log("BlueToothService :: connect Function :: success :: device----", response);
                        onConnect(response);
                    },
                    error =>  {
                        console.log("BlueToothService :: connect Function :: error :: device----", error);   
                        onFailure(error);         
                    });            
        });
    } }

Файл компонента 

import {Component, NgZone} from '@angular/core';
import {Events, IonicPage, NavController, NavParams, ViewController} from 'ionic-angular';

import {BlueToothService} from '../../../providers/bluetooth/bluetooth.service';

@IonicPage()
@Component({
    selector: 'test-data',
    templateUrl: 'test-data.html',
})
export class AddTestKitDataPage {
    public isBluetoothConnected: boolean = false;
    public deviceId: any;

    public connectToBLE() {
        this.blueToothService.connect(this.deviceId, onConnectionSuccess, onConnectionFailure);  //Assume device id is already present
    }

    private onConnectionSuccess = (reason) => {
        this.zone.run(() => {
            this.isBluetoothConnected = true;
            console.log("isBluetoothConnected---", this.isBluetoothConnected);      
        });
    };

    private onConnectionFailure = (reason) => {
        this.zone.run(() => {
            this.isBluetoothConnected = false;
            console.log("isBluetoothConnected---", this.isBluetoothConnected);      
        });
    } }

HTML 

<ion-content>

    <div text-center *ngIf="!isBluetoothConnected">
        Bluetooth Connection failure
    </div>

    <div text-center *ngIf="isBluetoothConnected">
        Bluetooth Connection success
    </div>

    <button ion-button full class="primaryBlockButton" (click)="connectToBLE()">Click</button>

</ion-content>

1 Ответ

0 голосов
/ 16 мая 2018

Поскольку console.log действительно подтверждает, что в вашем случае данные действительно изменяются, а представление (шаблон) не получает обновления - это указывает на то, что обнаружение изменений не происходит.

Чтобы подтвердить, что вы сделалиуже попробуйте "взломать", и, по словам вас в комментариях, это сработало: 

private onConnectionSuccess = (reason) => { 
    this.zone.run(() => { 
        setTimeout(() => { 
            this.isBluetoothConnected = true; 
            console.log("isBluetoothConnected---", this.isBluetoothConnected); 
        },0) 
     }); 
};

По сути, взлом "оборачивает" ваши изменения данных в асинхронное (setTimeout) действие, которое захватывает Angular.

Теперь для решения этой проблемы вы можете либо убедиться, что изменение данных в вашем случае происходит через событие, которое Angular получает естественным образом (например, добавить пользовательский даже прослушиватель).

Или попытаться использовать обнаружение изменений для обнаружения изменений вручную после изменения данных:

import CDR: 

import { ChangeDetectorRef } from '@angular/core';

внедрить его: 

constructor (private cdr: ChangeDetectorRef) {}

Добавить его в ваш метод: 

private onConnectionSuccess = (reason) => { 
    this.isBluetoothConnected = true; 
    console.log("isBluetoothConnected---", this.isBluetoothConnected);
    this.cdr.detectChanges();
};

Попробуйте этот подход какЯ думаю, что это будет лучше, чем взломать.

...