Angular 2数组模板更新不起作用

Question

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

蓝牙

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