Ionic2 вид не обновляется после загрузки файла FileReader

Question

Среда разработки

CJU: ~/Проекты/ionic2/i2ts $ ионную информация
WARN: ionic.config.js устарела, вы можете удалить его.
информация Ваша система:
Кордова CLI: 6.1.1
версия Глоток: CLI версия 3.9.1
Глоток местный: Локальная версия 3.9.1
Ионные Framework Версия: 2.0.0-beta.6
Ионные CLI версия: 2.0.0-beta.25
ионные App Lib версия: 2.0.0-beta.15 версия
КСН-Deploy: 1.8.5
КСН-сим версия: 5.0.8
ОС: Mac OS X El Capitan
Версия узла: v4.4.2
версия Xcode: Xcode 7.3 Сложение версия 7D175

Вопрос

Я пытался как на платформе браузера и Ios телефона. Для того, чтобы увидеть его на платформе браузера, выполните следующие действия

Ионной платформу добавить Брауэр

ионную запустить браузер

В браузере, он начинает со страницей «Hello Ионной». Нажмите кнопку «Написать в локальный файл, используя кнопку cordova-plugin-file», на оборотной стороне «Это новый текст» будет записан в локальный файл с использованием файла cordova-plugin-file. Нажмите кнопку «Читать из файла с помощью кнопки cordova-plugin-file», в журнале консоли отображается, что файл читается. Однако представление не обновляется. Нажмите любую кнопку еще раз, представление будет обновлено новым текстом.

Я нашел googled и нашел связанный с этим вопрос https://github.com/angular/zone.js/issues/137. Это говорит о том, что FileReader в файле cordova-plugin-файла не зонирован. Но я использую «ионно-угловой»: «2.0.0-beta.6» в своем проекте. Не следует включать исправление. Тем не менее я вижу ту же проблему 137 в моем проекте ionic2.

Код на https://github.com/CharlesJu1/FileReaderNotZoned

Вот привет-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

Были некоторые известные проблемы в бета-5 и бета-6 вокруг зон. Новая бета должна быть в ближайшее время, что решает их, но в то же время вы можете сделать следующие шаги:

1. Импорт NgZone
2. Вводит экземпляр NgZone
3. Wrap вызова, где вы хотите привязки данных для работы в Метод запуска экземпляра NgZone.

Смотрите пример здесь:

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

Спасибо, Dan