角2 Observableからのデータバインディング

Question

ビーコンイベントをリッスンしているページがあります。私はビーコンが検出されたときにポップアップを表示したい。問題は、私はビーコンを検出したときに、div要素が表示されていないということです

home.ts

export class HomePage { 
    beacon_found: boolean; 

    constructor(public navCtrl: NavController, public events: Events, public ibeacon: IBeacon) { 

    this.ibeacon.requestAlwaysAuthorization(); 
    let delegate = this.ibeacon.Delegate(); 

    let region = this.ibeacon.BeaconRegion('ibirapuera','B9407F30-F5F8-466E-AFF9-25556B57FE6D'); 
    this.ibeacon.startMonitoringForRegion(region) 
    .then(
    () => console.log('Native layer recieved the request to monitoring'), 
     error => console.error('Native layer failed to begin monitoring: ', error) 
    ) 

    delegate.didStartMonitoringForRegion() 
    .subscribe(
     (data) => console.log("Started monitoring beacons", data) 
    ) 

    delegate.didEnterRegion() 
    .subscribe(
     (data) => { 
     this.beacon_found = true; 
     } 
    ) 

    delegate.didExitRegion() 
    .subscribe(
     (data) => { 
     console.log("Exit Region"); 
     } 
    ) 

    } 
} 

home.html

<div class="card-beacon" *ngIf="beacon_found"> 
</div> 

：私は、次のコードを持っています。私は非同期データバインディングについて読んでいますが、どうやってそれを行うのか分かりません。

誰かが解決する方法を知っていますか？

ありがとうございます。

Answer 1

私はそれはあなたがrxjs BehaviorSubject使うべき場所ですChangeDetectorRef

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

export class HomePage { 
    beacon_found: boolean; 

    constructor(public navCtrl: NavController, public events: Events, public cdr: ChangeDetectorRef) { 
    events.subscribe('beacon:detected',(data) => { 
     this.beacon_found = true; 
     cdr.detectChanges(); 
    }) 

    events.subscribe('beacon:undetected',(data) => { 
     this.beacon_found = false; 
     cdr.detectChanges(); 
    }) 
    } 
} 

Answer 2

を使用して作業しました：（どこNgZoneが注入され、beaconFoundSubjectを通知するために使用される必要があるかもしれないあなたのコンストラクタで

beaconFoundSubject : BehaviorSubject<boolean> = new BehaviorSubject(false); 

を）：

constructor(private ngzone: NgZone) { 

.... 

delegate.didEnterRegion() 
.subscribe(
    (data) => { 
    this.ngzone.run(() => this.beaconFoundSubject.next(true)); 
    } 
) 

テンプレート内：

<div class="card-beacon" *ngIf="beaconFoundSubject | async"> 
</div>