Ionic 3 windowsAzure data to Array not updating *ngFor

Ionic Framework ionic-v3
1

I’m currently investigating Ionic 3 using the simple template.
My project is running and i can get data from my windowsAzure database into an array ( i’m looking at doing the offline process later on )

As the processes are asynchronous there are a lot of ‘.then(…’ sections.

So here are some snipets of my code on a basic page…

  myrows : any[] = []; //=  Array<{text:string}>;
  my: "hello";
   _this = this;

  constructor(public navCtrl: NavController, public navParams: NavParams) {
    this.myrows = [];
    //this.myrows.push({text:"dude"}); // added to try and see if the ngfor worked -- it did show this value

    this.OnInit();

  }

  OnInit() {
    console.log("so this is my starting code !");
    client = new WindowsAzure.MobileServiceClient("https://MYURL.azurewebsites.net");
    store = new WindowsAzure.MobileServiceSqliteStore('store.db');
    store.defineTable({
      name: 'todoitem',
      columnDefinitions: {
        id: 'string',
        text: 'string',
        deleted: 'boolean',
        complete: 'boolean'
      }
    });

    this.initializeStore();
  }

  showdata(){
    //console.log("showData"); 
    todoItemTable.where({ complete: false })     // Set up the query
    .read()                         // Read the results
    .then(item =>{this.mysuccess(item);
  });
  return true;
  }

  mysuccess(item){
    console.log(item); // shows all my RAW data
    item.forEach(_i =>{
    console.log(_i.text);
      this.myrows.push({text: _i.text}); // this is been added - shows in console.log!
    })

    console.log( this.myrows);

    return this.myrows; // trying to force it to update the UI
}

  initializeStore() {

   // table = client.getTable("todoitem");
    syncContext = client.getSyncContext();
    todoItemTable = client.getSyncTable('todoitem');

    syncContext.initialize(store).then(() => {
      console.log("So what !");
      syncContext
        .pull(new WindowsAzure.Query('todoitem' /* table name */), 'all_todo_items' /* unique queryId */)
    }) .then(() =>this.showdata());


  }// end initaliseStore


  itemTapped(item) {
    // That's right, we're pushing to ourselves!
   console.log(item);
  }

the html is very basic

<ion-list>
  {{myrows}}
  <button ion-item *ngFor="let r of myrows" (click)="itemTapped(r)">
    {{r.text}}

  </button>
</ion-list>

When i click on an item - itemTapped - the lost then updates on the page!!!

Please - why will it not update as the array has data pushed to it…
I have an ionic v1 project and that behaved better than this!

2

So after more research and failed attempts i have found NGZONE

It does feel like this is a step backwards having to wrap code in this way (i’m sure there is a good reason - but at the moment its just more bloat code ) - any way…
Add NgZone to your code

import { Component, NgZone } from '@angular/core';

Create a new zone object

 zone = new NgZone({ enableLongStackTrace: false });

I also updated the code which populates the ARRAY - the data is now shown on the page…

 mysuccess(item){
    console.log(item); // shows all my RAW data
    this.zone.run(()=>{
    item.forEach(_i =>{
    console.log(_i.text);
      this.myrows.push({text: _i.text}); // this is been added - shows in console.log!
    })

    console.log( this.myrows);
  })
}
3