IONIC BLE（蓝牙低功耗） - 设备列表未显示

Question

当我扫描 BLE 设备时，会找到它们，但是，在找到它们之后，我会尝试将这些设备添加到列表中。

问题：应用程序上未显示列表（或为空）。

JS：

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

@Component({
  selector: 'page-about',
  templateUrl: 'about.html'
})
export class AboutPage {

  device_list: any[];

  constructor(public alertCtrl: AlertController, public ble: BLE) {

  }

  scan(){
    this.device_list = [];

    this.ble.scan([], 5).subscribe(device => {

      // ADDING TO LIST
      this.device_list.push(device);

    }, error => {
      console.log('Check your bluetooth connection.');
    });

  }

}

如果我使用console.log(JSON.stringify(device)) 而不是this.device_list.push(device)，则设备将被打印出来，但我需要将它们添加到列表中并在应用程序上显示该列表。

为什么会这样？

HTML：

<ion-header>
  <ion-navbar>
    <ion-title>
      About
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <button ion-button (click)="scan()" color="danger" block>SCAN</button>

  <ion-list>
    <ion-item *ngFor="let item of device_list">
        {{item.id+"----"item.name}}
    </ion-item>
  </ion-list>
</ion-content>

Answer 1

尝试这种方式添加到列表中：

this.device_list = device.slice();

基本上， slice() 操作会克隆数组并返回对新数组的引用。我在想，因为您只是将数据推送到device_list，所以对列表的引用保持不变（尽管实际内容发生了变化），因此角度不会重新渲染视图。

Answer 2

已解决

不得不添加 NgZone（不确定它的作用）。

import { Component, NgZone } from '@angular/core';
import { BLE } from '@ionic-native/ble';

@Component({
  selector: 'page-about',
  templateUrl: 'about.html'
})
export class AboutPage {

  device_list: any[];

  constructor(private zone:NgZone, public ble: BLE) {

  }

  scan(){
    this.device_list = [];

    this.ble.scan([], 5).subscribe(device => {
      // ADD TO LIST
      this.zone.run(() => {
       this.device_list.push(device);
      });
    }, error => {
      this.app_alert('Check your bluetooth connection.');
    });

  }

}