cordova.fileTransfer不更新页面模板Ionic2 + Cordova [英] cordova.fileTransfer not updating page template Ionic2+Cordova

问题描述

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

I have created an Ionic2 App using cordova FileTransferplugin, i am downloading remote server file.

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

Everything is working perfectly, but when I try to update template while fileTransfer.OnProgress event, the template is not updating the % downloaded.

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

Pleas see this video for my problem. Ionic_youtube_link

我的代码是，逻辑是来自'@ angular / core'的downloadFile函数

My Code is, logic is in downloadFile function

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.但不更新。
请帮忙。

The totalPercent value either has 0 or 100.But not updating. Please help.

推荐答案

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

This is because the totalPercent of this inside the handler was set to the global Window object instead of the object itself.

我终于让它工作了

从'@ angular / core'导入{NgZone};

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的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！