Question

我使用cordova FileTransferplugin创建了一个Ionic2应用程序，我正在下载远程服务器文件。

一切正常，但是当我尝试在fileTransfer.OnProgress事件中更新模板时，模板没有更新％下载。

请看这个视频我的问题。 Ionic_youtube_link

我的代码是，逻辑在downloadFile函数

import {Component, AfterViewInit, ViewChild} from '@angular/core';
import {NavController, NavParams, ViewController, Nav} from 'ionic-angular';

import {Page, Platform} from 'ionic-angular';
import {File, Device, Cordova, Transfer} from 'ionic-native';

import { SafeResourceUrl, DomSanitizationService } from '@angular/platform-browser';

@Component({
  templateUrl: 'build/pages/video-download-modal/video-download-modal.html',
  providers: [File, Transfer]
})
export class VideoDownloadModal {
  selectedItem: any;
  @ViewChild(Nav) nav: Nav;

  videoPathUrl: string;
  isPlatformReady: boolean;
  platformName: string;
  directoryName: string = "socialAppDir";

  totalVideoSize:number;
  totalDownloaded:number;
  totalPercent:string = "0%";

  constructor(public navCtrl: NavController, navParams: NavParams, private _viewController: ViewController, platform: Platform, private transfer:Transfer) {
    // If we navigated to this page, we will have an item available as a nav param
    if (platform.is('core')) {//if on dekstop
      console.log('dektop');
    } else {
      this.videoPathUrl = navParams.get('videoPath');
      console.log(this.videoPathUrl);
      platform.ready().then((readySource) => {
        this.isPlatformReady = true;
        console.log('ready 1234');
        const fs: string = cordova.file.externalRootDirectory;
        console.log(cordova.file.dataDirectory);
        this.platformName = Device.device.platform;

        File.checkDir(cordova.file.externalDataDirectory, this.directoryName).then(() => {
          console.log('directory exists');
          this.downloadFile();
        }, (error) => {
          console.log('directory not exists');
          this.createDirectory();
        })

      })
    }
  }
  dismiss() {
    let data = { 'foo': 'bar' };
    this._viewController.dismiss(data);
  }

  createDirectory():void{
    File.createDir(cordova.file.externalDataDirectory, this.directoryName, true).then(() => {
      console.log("created externalDataDirectory");
      this.downloadFile();
    },(error) => {
      console.log('some error happen')
    })
  }

  downloadFile = () => {
    console.log(this);
    let fileName: string = this.videoPathUrl.split("/").pop();
    let targetPath = cordova.file.externalDataDirectory + this.directoryName + "/" + fileName;
    console.log(targetPath);
    this.transfer.download(this.videoPathUrl, targetPath, true, {}).then(() => {
      console.log('video downloaded')
    }, (error) => {
      console.log(error)
    })
    this.transfer.onProgress((progress) => {
      console.log(this);
      this.totalVideoSize = progress.total;
      this.totalDownloaded = progress.loaded;
      this.totalPercent = ((progress.loaded / progress.total) * 100).toString();

      console.log(this.totalPercent);
    })
  }

  ionViewDidEnter() {
    console.log("enter login1");
  }    
}

HTML是

<ion-content>


<div id="modalContainer" class="abd">
    <ion-spinner></ion-spinner>
    <br />
    {{**totalPercent**}}
    <br />
    <button dnager block (click)="dismiss()">Exit</button>
  </div>
</ion-content>

totalPercent值为0或100.但不更新。请帮忙。

Answer 1

这是因为处理程序内部的totalPercent被设置为全局Window对象而不是对象本身。

我终于得到了它的工作

import { NgZone } from '@angular/core';

fileTransfer.onProgress((progressEvent: ProgressEvent) => {
  this.ngZone.run(() => {
    if (progressEvent.lengthComputable) {
      let lp = progressEvent.loaded / progressEvent.total * 100;
      this.loadingPercent = Math.round(lp * 100) / 100;
    }
  });
})

cordova.fileTransfer不更新页面模板Ionic2 + Cordova

1 个答案: