Ionic 2：数据模型的更改直到与UI交互后才会更新UI

Question

问）为什么我的数据更改不会在UI上显示，比如项目列表，但一旦我与UI交互，它们就会神奇地出现？

例如，如果我获取一些绑定到列表的数据，然后像下面这样更新该列表：

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));
  }
);

在与应用程序交互（如单击菜单按钮或聚焦搜索字段）之前，客户端列表不会出现在用户界面中。

- Dave

---

我曾经遇到过类似的问题，问题出在我执行请求的位置上。我的建议是避免在需要更新视图的任何异步调用中使用 ngOnInit、onPageWillEnter 和 onPageLoaded。我不得不使用 onPageDidEnter() 在异步调用完成后更新视图。 - Richard Pressler

谢谢，但这正是onPageWillEnter和ngOnInit的用途！这个错误被确认与Angular 2中的静默失败有关。我现在使用onPageWillEnter/ngOnInit没有任何问题，所以如果您有任何进一步的问题，您可能需要重新访问它们。干杯。 - Dave

Answer 1

请确保您已经升级到beta.6版本，并按照以下指南操作（因为除了更新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.

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

在对Ionic 2项目进行Beta 6更新时，请注意以下几点：

1. 使用最新版本的TypeScript（2.0.8及以上）和Node.js（6.0.0以上） 2. 更新你的package.json文件中的 "@ionic/app-scripts" 依赖项到 "0.0.39" 3. 在AppModule的providers数组中引入HTTP_PROVIDERS和JSONP_PROVIDERS 4. 如果你使用了Ionic Native插件，请检查插件的版本是否兼容Beta 6 5. 如果你使用了Cordova插件，请将插件的所有声明都添加到你的typings.d.ts文件中

如果你遵循了这些步骤但仍然遇到问题，请参考官方发布说明。

- TheAlbear