1. Zuhause
  2. Frage und Antwort
  3. Ionic2 Ansicht nicht aktualisiert, nachdem Filereader Ladedatei

Ionic2 Ansicht nicht aktualisiert, nachdem Filereader Ladedatei

2016-05-06 16 views
0

Die Entwicklungsumgebung

CJU: ~/Projekte/ionic2/i2ts $ ionische info
WARNEN: ionic.config.js veraltet ist, können Sie ihn entfernen.
Ihre Systeminformationen:
Cordova CLI: 6.1.1
Gulp Version: CLI-Version 3.9.1
Gulp local: Lokale 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
Betriebssystem: Mac OS X El Capitan
Knotenversion: v4.4.2
Xcode Version: Xcode 7.3 Build-Version 7D175Ionic2 Ansicht nicht aktualisiert, nachdem Filereader Ladedatei

Das Problem

Ich habe versucht, sowohl auf Browser-Plattform und ios Telefon. Um es auf Browser-Plattform zu sehen, gehen Sie wie folgt

ionische Plattform add Brower

ionischen run Browser

auf dem Browser, startet er mit dem "Hallo Ionic" Seite. Klicken Sie auf die Schaltfläche 'Mit cordova-plugin-Datei in lokale Datei schreiben', auf der Rückseite wird "Dies ist neuer Text" in eine lokale Datei geschrieben, in der die cordova-plugin-Datei verwendet wird. Klicken Sie auf die Schaltfläche "Aus Datei mit Cordova-Plugin-Datei lesen". Das Konsolenprotokoll zeigt an, dass die Datei zurückgelesen wurde. Die Ansicht wird jedoch nicht aktualisiert. Klicken Sie erneut auf eine Schaltfläche, die Ansicht wird mit dem neuen Text aktualisiert.

Ich googelte und fand ein verwandtes Problem https://github.com/angular/zone.js/issues/137. Das sagt FileReader in Cordova-Plugin-Datei ist nicht in Zonen unterteilt. Aber ich verwende "ionic-angular": "2.0.0-beta.6" in meinem Projekt. Sollte es den Fix schon nicht enthalten? Immer noch sehe ich das gleiche Problem in meinem ionic2-Projekt.

Der Code ist bei https://github.com/CharlesJu1/FileReaderNotZoned

Hier ist die hallo-ionic.ts Datei.

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

Hier ist die Hallo-ionic.html Datei.

<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>

Quelle

2016-05-06 Charles Ju

Antwort

Verwandte Themen

 Verwandte Themen