Angular NativeScript BLE-使用NativeScript bluetooth搜索设备时更新接口

我正在使用NativeScript和NativeScript蓝牙插件创建一个BLE搜索应用程序。 我想不出在搜索设备时如何更新视图。 这是我的密码

app.modules.ts

import { NgModule, NO_ERRORS_SCHEMA } from "@angular/core";
import { NativeScriptModule } from "nativescript-angular/nativescript.module";

import { AppComponent } from "./app.component";

@NgModule({
  declarations: [AppComponent],
  bootstrap: [AppComponent],
  imports: [NativeScriptModule],
  schemas: [NO_ERRORS_SCHEMA],
})
export class AppModule {}

app.component.ts

import {Component} from "@angular/core";

let ble = require("nativescript-bluetooth");

@Component({
    selector: "my-app",
    styleUrls: ['app.css'],
    templateUrl: "app.component.html"
})
export class AppComponent {
    log: string = "";


    startScanning() {
        ble.startScanning({
            serviceUUIDs: [],
            seconds: 5,
            onDiscovered: (peripheral) => {
                if (peripheral.name == "SWING") {
                    this.stopScanning();
                    this.updateLog(`Device Name: ${peripheral.name}`);
                }
            }
        }).then(() => {
            this.updateLog("scanning completed");
        }, (err) => {
            console.error(`Error on scanning: ${err}`);
        })
    }

    stopScanning() {
        ble.stopScanning().then(() => {
            this.updateLog("Stopped");
        })
    }

    updateLog(message) {
        console.log(message);
        this.log += `\n${message}`;
    }
}

app.component.html

<ActionBar title="My App">
</ActionBar>
<StackLayout>
    <Button class="btn btn-primary btn-active" id="appButton" text="Search Device" (tap)="startScanning()"></Button>

    <TextView text="{{ log }}" style="height: 100%;background-color: #282a37;color: #fff;" editable="false"></TextView>
</StackLayout>

当它扫描时，在完成

ble.startScanning

的5秒钟之前，它不会将日志更新到视图中。 我相信这与BLE插件无关。这更像是Javascript承诺和NativeScript问题

---

谢谢。

onDiscovered回调在Angular的生命周期之外运行，因此为了让Angular了解更新（并因此更新UI），您需要对其进行一些调整

这就是NgZone的用途

// add
constuctor(private zone: NgZone) {}

// within 'onDiscovered', add
this.zone.run(() => {
  this.updateLog(`Device Name: ${peripheral.name}`);
})

---

onDiscovered

回调在Angular的生命周期之外运行，因此为了让Angular知道更新（并因此更新UI），您需要对其进行一些调整

这就是NgZone的用途

// add
constuctor(private zone: NgZone) {}

// within 'onDiscovered', add
this.zone.run(() => {
  this.updateLog(`Device Name: ${peripheral.name}`);
})

---

本例中您没有使用RxJS。是的，@paulpdaniels您是正确的。我指的是承诺/等待方法，而不是RxJs。我更新了内容以删除它。谢谢，请分享

updateLog

函数。@EddyVerbruggen我更新了updateLog函数。谢谢这是NativeScript Angular应用程序吗？请包含整个组件，因为建议取决于代码的其余部分。在本例中，您没有使用RxJS。是的，@paulpdaniels您是正确的。我指的是承诺/等待方法，而不是RxJs。我更新了内容以删除它。谢谢，请分享

updateLog

函数。@EddyVerbruggen我更新了updateLog函数。谢谢这是NativeScript Angular应用程序吗？请包括您的整个组件，因为建议取决于代码的其余部分。谢谢！！！我确实知道我需要做一些超出NgZone范围的事情！！你救了我一周！谢谢我确实知道我需要做一些超出NgZone范围的事情！！你救了我一周！