각도 2 관찰 가능 데이터 바인딩

Question

신호 이벤트를 수신하는 페이지가 있습니다. 비콘이 감지되면 팝업을 표시하고 싶습니다. 문제는 내가 비콘을 검출 할 때, 사업부가 표시되지 않는 것입니다

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> 

: 나는 다음과 같은 코드가 있습니다. 내가 비동기 databiding에 대해 뭔가를 읽을 수 있지만 그것을 어떻게 해야할지 모르겠다.

누구든지 해결 방법을 알고 있습니까?

미리 감사드립니다. NgZone가 주입 beaconFoundSubject에 통지하기 위해서 사용 될 필요가있다 곳 (생성자에서

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

:

Answer 1

가 나는 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

당신이 rxjs BehaviorSubject를 사용해야하는 곳은을 사용하여 작업 있어요) :

constructor(private ngzone: NgZone) { 

.... 

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

그런 다음 템플릿에 :

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