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，对列表的引用保持不变（尽管实际内容发生了变化），因此angular不会重新渲染视图。

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.');
    });

  }

}

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

2 个答案: