Angular 2 - View not updating after model changes

Question

I have a simple component which calls a REST api every few seconds and receives back some JSON data   I can see from my log statements and the network traffic that the JSON data being returned is changing  and my model is being updated  however  the view isn t changing   My component looks like   import  Component  OnInit  from  angular2 core   import  RecentDetectionService  from     services recentdetection service   import  RecentDetection  from     model recentdetection   import  Observable  from  rxjs Rx     Component       selector   recent-detections       templateUrl    app components recentdetection template html       providers   RecentDetectionService        export class RecentDetectionComponent implements OnInit        recentDetections  Array lt RecentDetection gt        constructor private recentDetectionService  RecentDetectionService            this recentDetections   new Array lt RecentDetection gt                getRecentDetections    void           this recentDetectionService getJsonFromApi                subscribe recent   gt    this recentDetections   recent               console log this recentDetections 0  macAddress                 ngOnInit             this getRecentDetections            let timer   Observable timer 2000  5000           timer subscribe      gt  this getRecentDetections               And my view looks like    lt div class  panel panel-default  gt       lt  -- Default panel contents -- gt       lt div class  panel-heading  gt  lt h3 gt Recently detected lt  h3 gt  lt  div gt       lt div class  panel-body  gt           lt p gt Recently detected devices lt  p gt       lt  div gt        lt  -- Table -- gt       lt table class  table  style  table-layout  fixed   word-wrap  break-word   gt           lt thead gt               lt tr gt                   lt th gt Id lt  th gt                   lt th gt Vendor lt  th gt                   lt th gt Time lt  th gt                   lt th gt Mac lt  th gt               lt  tr gt           lt  thead gt           lt tbody   gt               lt tr  ngFor   detected of recentDetections  gt                   lt td gt   detected broadcastId   lt  td gt                   lt td gt   detected vendor   lt  td gt                   lt td gt   detected timeStamp   date  yyyy-MM-dd HH mm ss    lt  td gt                   lt td gt   detected macAddress   lt  td gt               lt  tr gt           lt  tbody gt       lt  table gt   lt  div gt    I can see from the results of console log this recentDetections 0  macAddress  that the recentDetections object is being updated  but the table in the view never changes unless I reload the page   I m struggling to see what I m doing wrong here   Can anyone help

User · Answer

In my case  I had a very similar problem  I was updating my view inside a function that was being called by a parent component  and in my parent component I forgot to use  ViewChild NameOfMyChieldComponent   I lost at least 3 hours just for this stupid mistake   i e  I didn t need to use any of those methods     ChangeDetectorRef detectChanges   ChangeDetectorRef markForCheck   ApplicationRef tick

User · Answer

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 lt RecentDetection gt        constructor private zone NgZone      lt    added         private recentDetectionService  RecentDetectionService            this recentDetections   new Array lt RecentDetection gt                getRecentDetections    void           this recentDetectionService getJsonFromApi                subscribe recent   gt                      this zone run      gt        lt    added                      this recentDetections   recent                       console log this recentDetections 0  macAddress                                               ngOnInit             this getRecentDetections            let timer   Observable timer 2000  5000           timer subscribe      gt  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

User · Answer

Instead of dealing with zones and change detection     let AsyncPipe handle complexity  This will put observable subscription  unsubscription  to prevent memory leaks  and changes detection on Angular shoulders   Change your class to make an observable  that will emit results of new requests   export class RecentDetectionComponent implements OnInit        recentDetections   Observable lt Array lt RecentDetection gt  gt        constructor private recentDetectionService  RecentDetectionService               ngOnInit             this recentDetections    Observable interval 5000               exhaustMap      gt  this recentDetectionService getJsonFromApi                 do recent   gt  console log recent 0  macAddress              And update your view to use AsyncPipe    lt tr  ngFor  let detected of recentDetections    async  gt           lt  tr gt    Want to add  that it s better to make a service with a method that will take interval argument  and    create new requests  by using exhaustMap like in code above   handle requests errors  stop browser from making new requests while offline

User · Answer

It is originally an answer in the comments from  Mark Rajcok  But I want to place it here as a tested and worked as a solution using ChangeDetectorRef   I see a good point here   Another alternative is to inject ChangeDetectorRef and call cdRef detectChanges   instead of zone run    This could be more efficient  since it will not run change detection over the entire component tree like zone run   does      Mark Rajcok  So code must be like  import  Component  OnInit  ChangeDetectorRef  from  angular2 core    export class RecentDetectionComponent implements OnInit        recentDetections  Array lt RecentDetection gt        constructor private cdRef  ChangeDetectorRef      lt    added                 private recentDetectionService  RecentDetectionService            this recentDetections   new Array lt RecentDetection gt                getRecentDetections    void           this recentDetectionService getJsonFromApi                subscribe recent   gt                    this recentDetections   recent                  console log this recentDetections 0  macAddress                   this cdRef detectChanges        lt    added                            ngOnInit             this getRecentDetections            let timer   Observable timer 2000  5000           timer subscribe      gt  this getRecentDetections               Edit  Using  detectChanges   inside subscibe could lead to issue Attempt to use a destroyed view  detectChanges To solve it you need to unsubscribe before you destroy the component  so the full code will be like  import  Component  OnInit  ChangeDetectorRef  OnDestroy  from  angular2 core    export class RecentDetectionComponent implements OnInit  OnDestroy        recentDetections  Array lt RecentDetection gt       private timerObserver  Subscription       constructor private cdRef  ChangeDetectorRef      lt    added                 private recentDetectionService  RecentDetectionService            this recentDetections   new Array lt RecentDetection gt                getRecentDetections    void           this recentDetectionService getJsonFromApi                subscribe recent   gt                    this recentDetections   recent                  console log this recentDetections 0  macAddress                   this cdRef detectChanges        lt    added                            ngOnInit             this getRecentDetections            let timer   Observable timer 2000  5000           this timerObserver   timer subscribe      gt  this getRecentDetections                ngOnDestroy             this timerObserver unsubscribe

[angular] Angular 2 - View not updating after model changes

Examples related to angular