来自 Observable 的 Angular 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>

问题是当我检测到信标时，没有显示 div。我读过一些关于异步数据绑定的文章，但我不知道该怎么做。

请问有人知道怎么解决吗？

提前致谢。

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 的地方：

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

在您的构造函数中（可能需要注入 NgZone 并用于通知 beaconFoundSubject）：

constructor(private ngzone: NgZone) {

....

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

然后在你的模板中：

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