Ionic 3和Ngzone无法正常工作-无法将结果更新为HTML视图 [英] Ionic 3 and Ngzone is not working - not updating the results to HTML view

问题描述

蓝牙连接完成后，我想执行一些操作，反之亦然.
已处理的连接方案，并添加了成功和失败处理程序，并在这些处理程序功能中将标志更改为 True 和 False .
我使用console.log打印了该值，该值在组件文件中发生了变化，但没有反映在HTML中.
我尝试使用 ngZone ，但无法正常工作.
成功和失败处理代码如下:

I want to perform some action after Bluetooth connection is done and vice versa.
Handled scenarios for connection and added success and failure handler also, and changing a flag to True and False in those handler functions.
I printed that value using console.log, it changes in a component file but does not reflect in HTML.
I tried using ngZone, but it's not working.
Success and failure handle code are as follows:

BluetoothService

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 => {                   
                onConnect(response);
            },
            error =>  {
                this.ble.connect(deviceId)
                    .subscribe(response => {
                        onConnect(response);
                    },
                    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;       
        });
    };

    private onConnectionFailure = (reason) => {
        this.zone.run(() => {
            this.isBluetoothConnected = false;
        });
    } }

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>

推荐答案

由于console.log确实确认在您的情况下数据实际发生了更改，而视图(模板)没有得到更新-这表明更改检测未发生发生.

Since console.log does confirm that in your case data actually changes, while the view (template) is not getting an update - this hints that Change Detection is not taking place.

要验证您是否已经尝试过"hack"并根据您的评论进行了验证，请执行以下操作:

To validate that you did already try the "hack" and according to you in comments it worked:

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

基本上，黑客会将您的数据更改包装"到Angular接收的异步(setTimeout)活动中.

Basically the hack "wraps" your data change into an async (setTimeout) activity that Angular picks up.

现在要解决这个问题，您可以确保案例中的数据更改是通过Angular自然发生的事件(例如，添加自定义甚至侦听器)发生的.

Now to address it you could either ensure that data change in your case happens via event that Angular picks up naturally (add custom even listener for example).

或者尝试使用更改检测来在数据更改后手动检测更改:

Or try to use change detection to detectChanges manually after data changed:

导入CDR:

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

注入:

constructor (private cdr: ChangeDetectorRef) {}

将其添加到您的方法中:

Add it to your method:

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

尝试这种方法，因为我认为它会比hack更好.

Try this approach as I think it will be better than the hack.

这篇关于Ionic 3和Ngzone无法正常工作-无法将结果更新为HTML视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！