2016-05-18 5 views
1

私はBLEスキャンを実行し、観察可能な部分を介して結果をページコンポーネントに流し込み、そこからローカル変数に格納されて表示されます(理論上は表示されます)。Angular 2とRxJSはタイムアウト時にのみ更新可能

setIntervalメソッドからの更新によってビューが更新されるのに対して、startScanWithOptionsメソッドからの更新ではビューが更新されないという問題があります。すべての更新がコンソールに書き込まれていて、setInterval更新がレンダリングを引き起こすまで表示されないため、ページコンポーネントに更新が行われています。ページコンポーネントから

start() { 
    this.connections$ = new Observable((observer) => { 
     if (this.blePlugin) { 
      this.blePlugin.startScanWithOptions(
       [], 
       { reportDuplicates: true }, 
       (result) => this.observableScanResult(result, observer) 
      ); 
     } 
     setInterval(()=>{this.observableScanResult({rssi: 100}, observer)}, 1000); 
    }); 
    return this.connections$; 
} 

private observableScanResult(result, observer) { 
    observer.next(result); 
} 

:注射用サービスから

private startSelection() { 
    console.log('Scan Starting'); 
    this.connectionSource = this.connection.start(); 
    this.connectionSub = this.connectionSource.subscribe((result) => { 
     this.test.push(result.rssi); 
     console.log(this.test); 
    }); 
} 

答えて

2

アップデートstartScanWithOptions()方法から来る可能性が高い非同期イベントが猿ではないことを意味し、角度の範囲外で実行されています - setTimeout()のようにZone.jsによって更新されます。

startSelection()では、手動subscribe()コールバック内の変化検出をトリガ:

export class MyComponent { 
    constructor(private _cdRef:ChangeDetectorRef) {} 
    private startSelection() { 
    console.log('Scan Starting'); 
    this.connectionSource = this.connection.start(); 
    this.connectionSub = this.connectionSource.subscribe((result) => { 
     this.test.push(result.rssi); 
     console.log(this.test); 
     this._cdRef.detectChanges(); // <--------- 
    }); 
} 

Triggering Angular2 change detection manuallyを参照してください。

関連する問題