Angular: RxJS Observable only updating on timeout

BayssMekanique

I have an injectable service which performs BLE scans and streams the results through an observable to the page component where it is then stored in a local variable and displayed (in theory).

The issue is that updates coming from the startScanWithOptions method do not cause the view to be updated, while updates from the setInterval method do cause an update of the view. The update is making it to the page component as all updates are being written to the console, but not showing up until the setInterval updates cause a render.

From the injectable service:

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

From the page component:

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);
    });
}
Mark Rajcok

Updates coming from the startScanWithOptions() method are likely running outside the Angular zone, meaning that the asynchronous event is not monkey-patched by Zone.js, like setTimeout() is.

In startSelection(), manually trigger change detection inside your subscribe() callback:

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();   // <---------
    });
}

See also Triggering Angular2 change detection manually.

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

updating observable in rxjs

Angular 4 RxJs Observable Subjects array not updating with new object

Angular and RxJS: Updating the Subject?

Angular / RxJS Multicasting Observable of Observable

Angular observable not updating automatically

Angular 6 Updating Observable

Angular/RxJS: synchronous observable

RXJS/Angular Replace Observable

RxJS Observable merge angular

rxjs created observable timeout always errors

Angular2 / RxJS - updating variable after getting data from Http observable

Angular 2 rxjs timeout callback

Angular RxJs BehaviorSubject not updating properly

Angular - RxJS - Observable and method return

Angular RxJS Observable loading error

Angular rxjs mix observable and promises

Nested observable only propagates error after timeout

Angular/RxJS - Only call AJAX requests once, else emit current value of Observable

Angular 5, rxjs- wait for observable to finish only if it is in a middle of a run before running another process

RxJS - subscribe only once but do not complete Observable

Angular 5 View Not Updating After Timeout

$timeout service not updating angular controller from directive

Recursive function with timeout and check RxJs Observable value polling

How to handle RxJs timeout complete - Angular HttpClient

angular 2 observable timeout second parameter type

RxJs Observable created from Iterable of promises not updating values each iteration

Updating cached http request in Angular with RxJS and shareReplay

Angular 4 Subscribing to observable is not updating after change

Angular 2 Data service updating observable

TOP Ranking

HotTag

Archive