FileReader 加载文件后 Ionic2 视图未更新

Question

开发环境

cju:~/Projects/ionic2/i2ts $ ionic info
WARN: ionic.config.js has been deprecated, you can remove it.
Your system information:
Cordova CLI: 6.1.1
Gulp version: CLI version 3.9.1
Gulp local: Local version 3.9.1
Ionic Framework Version: 2.0.0-beta.6
Ionic CLI Version: 2.0.0-beta.25
Ionic App Lib Version: 2.0.0-beta.15
ios-deploy version: 1.8.5
ios-sim version: 5.0.8
OS: Mac OS X El Capitan
Node Version: v4.4.2
Xcode version: Xcode 7.3 Build version 7D175

问题

我在浏览器平台和 ios phone 上都试过了。要在浏览器平台上查看它，请执行以下操作

ionic platform add brower

ionic run browser

在浏览器上，它以“Hello Ionic”页面开头。点击'Write to local file using cordova-plugin-file'按钮，在后面，“This is new text”将使用cordova-plugin-file写入本地文件。点击'Read from file using cordova-plugin-file'按钮，控制台日志显示文件被回读。但是，视图不会更新。再次单击任意按钮，视图将更新为新文本。

我用谷歌搜索并发现了一个相关问题 https://github.com/angular/zone.js/issues/137。这表示 cordova-plugin-file 中的 FileReader 未分区。但是我在我的项目中使用了 "ionic-angular": "2.0.0-beta.6" 。它不应该包括修复程序吗？我仍然在我的 ionic2 项目中看到相同的问题 137。

密码在https://github.com/CharlesJu1/FileReaderNotZoned

这是 hello-ionic.ts 文件。

import {Page} from 'ionic-angular';

declare var window: any;
declare var LocalFileSystem: any;

@Page({
  templateUrl: 'build/pages/hello-ionic/hello-ionic.html'
})
export class HelloIonicPage {

  showText: string = 'Initial text string';

  writeText() {
    var newText = 'This is new text';
    function overWriteFile(fileEntry, dataObj) {
      // Create a FileWriter object for our FileEntry.
      fileEntry.createWriter(function(fileWriter) {

        fileWriter.onwriteend = function() {
          fileWriter.seek(0);
          fileWriter.write(dataObj);
        }

        //truncate() will call onwriteend.
        fileWriter.truncate(0);
      });
    }
    window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, function(fs) {
      console.log('file system open: ' + fs.name);
      fs.root.getFile("newPersistentFile.txt", { create: true, exclusive: false }, function(fileEntry) {
        console.log("fileEntry is file?" + fileEntry.isFile.toString());
        overWriteFile(fileEntry, newText);
      }, function(error) { });
    }, function(error) { });
  }

  test() {
    var that = this;
    var update = function() {
      that.showText = 'This is test text not from local file';
    }

    setTimeout(update, 1000);
  }

  readText() {
    var that = this;  
    var readFile = function(fileEntry, readFileCb) {

      fileEntry.file(function(file) {
        var reader = new FileReader();
        reader.onloadend = function() {

          //this in the following points to fileEntry.file
          console.log("Successful file read: " + this.result);
          readFileCb(this.result);
        };

        reader.readAsText(file);
      }, () => { console.log('Error reading file ') });
    }

    var readFileCb = function(fileContent: string) {
        that.showText = fileContent;
        console.log('readFileCb: ' + that.showText);
    }

    //check https://github.com/apache/cordova-plugin-file for details
    window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, function(fs) {

      console.log('file system open: ' + fs.name);
      fs.root.getFile("newPersistentFile.txt", { create: false }, function(fileEntry) {

        console.log("fileEntry is file?" + fileEntry.isFile.toString());
        // fileEntry.name == 'someFile.txt'
        // fileEntry.fullPath == '/someFile.txt'
        readFile(fileEntry, readFileCb);
      }, function(error) { });
    }, function(error) { });
  }
}

这是 hello-ionic.html 文件。

<ion-navbar *navbar>
  <button menuToggle>
    <ion-icon name="menu"></ion-icon>
  </button>
  <ion-title>Hello Ionic</ion-title>
</ion-navbar>


<ion-content padding class="getting-started">
  <p> 
    {{showText}}
  </p>

  <button (click)="writeText()">
  Write to local file using cordova-plugin-file
</button>

<br>
<button (click)="readText()">
  Read from file using cordova-plugin-file
</button>

<button (click)="test()">
  Set the text with a timer
</button>


</ion-content>

Answer 1

beta-5 和 beta-6 围绕区域存在一些已知问题。应该很快会推出一个新的测试版来解决这些问题，但与此同时您可以执行以下步骤吗：

导入 NgZone
注入 NgZone 实例
在您希望数据绑定在 NgZone 实例的运行方法中工作的地方包装调用。

在此处查看示例：

https://github.com/danbucholtz/ionic2-weight-tracker/blob/master/app/pages/photo-list/PhotoList.ts#L78

谢谢，旦

FileReader 加载文件后 Ionic2 视图未更新

Ionic2 view not updated after FileReader load file

zone

cordova-plugin-file

ionic2

开发环境

问题