CODEWITHSUNDEEP
typescriptangularionic2
Dave
Dave

Reputation: 5416

Ionic 2: Changes in data model not updated in UI until interaction with UI

Q) Why are the changes in my data not shown on the UI, e.g. a list of items, but as soon as I interact with the UI they magically appear?

For example, if I'm getting some data that is bound to a list and then updating that list like so:

this._LocalStorageService.getClients().then(
  (data) => {    
    this.clients = (data.res.rows.length == 1) ? <Client[]>JSON.parse(data.res.rows.item(0).clients) : [];
    this.showNoDataPresent = (this.clients.length == 0);  
  },
  (error) => {
    this._LogService.error(JSON.stringify(error.err));
  }
);

The clients list doesn't appear in the UI until I interact with the app, e.g. clicking the menu button, or focusing a search field.

Upvotes: 4

Views: 3038

Answers (1)

TheAlbear
TheAlbear

Reputation: 5585

Make sure that you have upgraded to beta.6 and follow the following guide (because there are few required changes in addition to updating the dependencies in package.json)

  1. Update the Ionic CLI to the latest version:npm install -g ionic@beta

  2. If you're upgrading a project using Ionic 2.0.0-beta.3 or older check out the following guide first.

  3. Remove the line import 'es6-shim' from app.ts/app.js.

  4. Add es6-shim.min.js before angular2-polyfill.js in the index.html file: 

      <script src="build/js/es6-shim.min.js"></script>
  <!-- Zone.js and Reflect-metadata  -->
  <script src="build/js/angular2-polyfills.js"></script>
  <!-- the bundle which is built from the app's source code -->
  <script src="build/js/app.bundle.js"></script>

  5. Update your package.json (do not copy&paste use these as a reference and update the ones in your file):

    "dependencies": { "angular2": "2.0.0-beta.15", "es6-shim": "^0.35.0", "ionic-angular": "2.0.0-beta.6", "ionic-native": "^1.1.1", "ionicons": "3.0.0-alpha.3", "reflect-metadata": "0.1.2", "rxjs": "5.0.0-beta.2", "zone.js": "^0.6.11" }

  6. In your package.json update the version of ionic-gulp-scripts-copy to ^1.0.1.

  7. From inside of your project's folder run npm install to install the new packages.

  8. Check out the changelog149 for breaking changes and update your project accordingly.

Source : https://forum.ionicframework.com/t/ionic-2-projects-updating-to-beta-6/50049

Upvotes: 2

Related Questions