IONIC BLE(Bluetooth Low Energy) - デバイスリストが表示されない

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

  }

}

If I do console.log(JSON.stringify(device)) instead of this.device_list.push(device) the devices are being printed out, but I need to add them to the list & show that list on the app.

これはなぜでしょうか。

HTML:


  
    
      About
    
  



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

  
    
        {{item.id+"----"item.name}}
    
  

1
さて、どうやら、リストは大丈夫ですし、デバイスもあります。ただし、次の場合にのみリストが表示されます(更新されます)。別のタブに切り替えてこのタブ(リストが表示されている)に戻るか、別のアプリケーションに切り替えてこのアプリケーションに戻ります。
追加された 著者 aivarastee,
さて、どうやら、リストは大丈夫ですし、デバイスもあります。ただし、次の場合にのみリストが表示されます(更新されます)。別のタブに切り替えてこのタブ(リストが表示されている)に戻るか、別のアプリケーションに切り替えてこのアプリケーションに戻ります。
追加された 著者 aivarastee,

4 答え

この方法でリストに追加してみてください。

this.device_list = device.slice();

基本的に、slice()操作は配列を複製し、新しい配列への参照を返します。データを device_list にプッシュするだけなので、リストへの参照は同じままで(実際の内容は変更されますが)、angleはビューを再レンダリングしません。

1
追加された
やってみました: this.device_list = device.slice(); そして this.device_list.push(device); しかしエラーは同じです..
追加された 著者 aivarastee,

この方法でリストに追加してみてください。

this.device_list = device.slice();

基本的に、slice()操作は配列を複製し、新しい配列への参照を返します。データを device_list にプッシュするだけなので、リストへの参照は同じままで(実際の内容は変更されますが)、angleはビューを再レンダリングしません。

1
追加された
やってみました: this.device_list = device.slice(); そして this.device_list.push(device); しかしエラーは同じです..
追加された 著者 aivarastee,

解決しました

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

  }

}
1
追加された
何があなたをこの解決策に導いたのですか?
追加された 著者 maninak,
いくつかのフォーラムで見つかりました。基本的に、* ngForの値は更新されていません、そしてこれはどういうわけかそれらを更新します。
追加された 著者 aivarastee,

解決しました

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

  }

}
1
追加された
何があなたをこの解決策に導いたのですか?
追加された 著者 maninak,
いくつかのフォーラムで見つかりました。基本的に、* ngForの値は更新されていません、そしてこれはどういうわけかそれらを更新します。
追加された 著者 aivarastee,
Angular - 日本のコミュニティ [ja]
Angular - 日本のコミュニティ [ja]
3 参加者の

このグループではAngularについて話します。 パートナー:kotaeta.com

JavaScript - 日本のコミュニティ
JavaScript - 日本のコミュニティ
2 参加者の

日本人コミュニティのjavascript