Question

我有一个使用cordova BLE插件的组件。当扫描开始查找设备时，它会将找到的每个设备推送到一个对象数组。在我的模板中，我使用*ngFor循环访问对象，但模板未更新并显示设备列表，即使我console.log(deviceList)我可以看到它已填充。该数组称为deviceList

bluetooth.ts

import { Component, Input, Output, EventEmitter } from '@angular/core';
import { Observable, Subscription } from 'rxjs/Rx';
import { BLE } from '@ionic-native/ble';


@Component({
selector: 'bluetooth',
templateUrl:'bluetooth.html'
})
export class Bluetooth {

/* new */
showWizard = true;
buttonConnected = false;
step = "BLEStepOne";
deviceList = [];

  constructor(public ble: BLE) {
}

ionViewDidLoad() {
  this.scanForDevices();
}

hideWizardCMD(){
    this.showWizard = false;
}

showWizardCMD(){
    this.showWizard = true;
}

gotoStep(step){
    this.step = step;
    if(step == "BLEStepTwo"){
        console.log('ble scan start');
        this.scanForDevices();
    }
}

scanForDevices(){
  console.log("scan for devices");
  this.deviceList = [];
  this.ble.startScan([]).subscribe(device => {
    this.deviceList.push(device);
    console.log(this.deviceList);
  });
}

}

bluetooth.html

<div class="not-logged-in" *ngIf="step=='BLEStepOne' && !buttonConnected">
<h2 class="smaller">Claim your Bel</h2> 
<p>Click to wake the button</p>
<img class="button-image" src="assets/images/button.png" />
<div class="buttons">
    <a class="btn btn-lg blank" (click)="hideWizardCMD()" href="#" >Skip</a> 
    <a class="btn btn-lg" (click)="gotoStep('BLEStepTwo')" href="#">Next</a> 
</div>
</div>

<div class="not-logged-in" *ngIf="step=='BLEStepTwo' && !buttonConnected">
<h2 class="smaller">Claim your Bel</h2> 
<p>Select your button to claim</p>
<ion-list>
  <ion-item *ngFor="let device of deviceList">
    <ion-label>{{device.id}}</ion-label>
    <ion-toggle [(ngModel)]="device.connected" (ngModelChange)="toggleConnection($event,device)"></ion-toggle>
  </ion-item>
</ion-list>
<div class="buttons">
    <a class="btn btn-lg" (click)="gotoStep('BLEStepOne')" href="#">Back</a> 
    <a class="btn btn-lg" (click)="gotoStep('BLEStepOne')" href="#">Claim</a> 
</div>
</div>

Answer 1

组件的实现缺少onChanges

Answer 2

我认为正确的方法是使用NgZone。

import { Component, NgZone } from '@angular/core';

然后：

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

scanForDevices(){
  this.deviceList = [];
  this.ble.startScan([]).subscribe(device => {
    this.zone.run(() => {
      this.deviceList.push(device);
    });
  });
}

Angular 2阵列模板更新无法正常工作

2 个答案: