Angular 2 – View not updating after model changes

by

It might be that the code in your service somehow breaks out of Angular’s zone. This breaks change detection. This should work:

import {Component, OnInit, NgZone} from 'angular2/core';

export class RecentDetectionComponent implements OnInit {

    recentDetections: Array<RecentDetection>;

    constructor(private zone:NgZone, // <== added
        private recentDetectionService: RecentDetectionService) {
        this.recentDetections = new Array<RecentDetection>();
    }

    getRecentDetections(): void {
        this.recentDetectionService.getJsonFromApi()
            .subscribe(recent => { 
                 this.zone.run(() => { // <== added
                     this.recentDetections = recent;
                     console.log(this.recentDetections[0].macAddress) 
                 });
        });
    }

    ngOnInit() {
        this.getRecentDetections();
        let timer = Observable.timer(2000, 5000);
        timer.subscribe(() => this.getRecentDetections());
    }
}

For other ways to invoke change detection see Triggering change detection manually in Angular

Alternative ways to invoke change detection are 

ChangeDetectorRef.detectChanges()

to immediately run change detection for the current component and its children

ChangeDetectorRef.markForCheck()

to include the current component the next time Angular runs change detection

ApplicationRef.tick()

to run change detection for the whole application

More Related Contents:

  1. Angular 2 – how round calculated number?
  2. Angular/RxJS When should I unsubscribe from `Subscription`
  3. Is it necessary to unsubscribe from observables created by Http methods?
  4. Dynamically add event listener
  5. What is the equivalent of ngShow and ngHide in Angular 2+?
  6. How to iterate object keys using *ngFor
  7. Angular error: “Can’t bind to ‘ngModel’ since it isn’t a known property of ‘input'”
  8. How to get current route
  9. Angular 2 – Execute code when closing window
  10. Angular 4 validator to check 2 controls at the same time
  11. vs
  12. Multiple conditions in ngClass – Angular 4
  13. Angular 2 Basic Authentication not working
  14. Property ‘json’ does not exist on type ‘Object’
  15. Error: Unexpected value ‘undefined’ imported by the module
  16. Update parent component property from child component in Angular 2
  17. How to use variable to define templateUrl in Angular2
  18. ‘node-sass’ usage is deprecated and will be removed in a future major version
  19. Observable.of is not a function
  20. What is the difference between declarations, providers, and import in NgModule?
  21. TypeScript-‘s Angular Framework Error – “There is no directive with exportAs set to ngForm”
  22. Angular routerLink does not navigate to the corresponding component
  23. How to return observable from subscribe
  24. How to mock Angular 4.3 httpClient an error response in testing
  25. How to add multiple headers in Angular 5 HttpInterceptor
  26. Limit input field to two decimal places – Angular 5
  27. Angular 6 – how to mock router.events url response in unit test
  28. How to create and download text/Json File with dynamic content using angular 2+
  29. FormControl.detectchanges – why use distinctUntilChanged?
  30. How to use angular2 built-in date pipe in services and directives script files [duplicate]

Leave a Comment