Angular 2 not updating until any object is clicked

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

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!