Angular 2 not updating until any object is clicked

Question

The following is something I'm trying to get working based on the Angular Tutorial.

export class DashboardComponent implements OnInit {
      title = 'Current Robots';
      private sobots: Robot[];

      constructor(
        private router: Router,
        private sobotService: RobotService) { 
      }

      getRobots() { 
          this.sobotService.getRobots().then(sobots => Array.prototype.push.apply(this.sobots, sobots.data));     
      }

      ngOnInit() {
          this.getRobots();
      }

      gotoDetail(sobot: Robot) {
        let link = ['/detail', sobot.Id];
        this.router.navigate(link);
      }

And the View

<h3>{{title}}</h3>
<div class="grid grid-pad">        
  <div *ngFor="let sobot of sobots" (click)="gotoDetail(sobot)" class="col-1-4">
    <div class="module sobot">
      <p>HostKey</p>
      <h4>{{sobot.HostKey}}</h4>
    </div>
  </div>
</div>
<sobot-search></sobot-search>

sobots.data looks to be returning the data object as expected - however it's still not updating until I click on any button/route/any event is fired.

No errors show up in the console and I'm quite confused!

I've gone ahead and tried to ensure that it's only adding data to the original array object but even that doesn't seem to work!

Answer 1

So it turns out that the sobotService was returning a q.js promise and not an ES6 promise. I believe this is probably why it didn't update as I'd expect it to like it did in the Heroes Tutorial.

By forcing it to update in the zone eg:

  this.sobotService .getRobots().then(ODataRobots => {
      this.zone.run(() => this.sobots = ODataRobots.data);          
  });

It managed to update the view as soon as the promise resolved.

I'll probably have to figure out if there is an easy way to remove the q.js promise from the library I am using (o.js) but in the meantime this works as expected!

Answer 2

Solution

As Abdul waheed mentioned before, the code that modifies the state needs to be wrapped with the ngZone service:

  // `ngZone` is the instance of the `NgZone` service.
  this.ngZone.run(() => {
    this.myState = 'new value';
  });

But as Madhur Bhaiya pointed out it is not detailed enough, so here I'm explaining a bit more.

Larger example

This example is provided by José Pedro Silva at GitHub Angular issues page.

public constructor(private ngZone: NgZone) {
}

public async update() {
  try {
    this.viewVariable = null;
    let newValue = await this.dataService.getAsync();

    this.ngZone.run(() => {
      this.viewVariable = newValue;
    });
  }
  catch (error) {
    this.viewVariable = error;
  }
}

Explanation

When there's an Asynchronous code (outside Angular scope) modifying the State, it will not trigger a View update. The click will do it. The NgZone Service can fix this issue.

The technique is helpful for AJAX calls as well as for any asynchronous call, such as an external library callback (which was my case).