数据变化，页面没有渲染

Question

用 ionic 实现了一个下载功能，

在 onProgress 中，计算了百分比，并将数据更新至 页面引用的对象上，

但是页面只有在 100%的时候渲染了，console.log  打出了完整的记录。

请问这个问题如何解决。

Answer 1

Parry 2018-08-12 12:37:49

onProgress 更新页面不渲染？方便贴一下代码吗？

• 提问者 qq_Mel_0 #1

  /*HTML*/
  <ion-header>
  
    <ion-navbar>
      <ion-title>地图设置</ion-title>
    </ion-navbar>
  
  </ion-header>
  
  
  <ion-content>
    <ion-list>
      <ion-list-header>
        下载地址
      </ion-list-header>
      <ion-item>
        <ion-label floating>IP</ion-label>
        <ion-input type="text" [(ngModel)]="ip"></ion-input>
      </ion-item>
  
      <ion-list-header>
        层级
      </ion-list-header>
      <ion-item *ngFor="let item of data" (click)="download(item.level)">
        <h2>{{item.level}}</h2>
        <p item-end>{{item.status}}</p>
      </ion-item>
    </ion-list>
  </ion-content>

• 提问者 qq_Mel_0 #2

  download(level) {
      let fileTransfer = this.transfer.create();
      const url = encodeURI(`http://${this.ip}/api/v1/tile-server/${level}.zip`);
      console.log(`will download file ${url}`);
  
      let obj = undefined;
      this.data.forEach(o => {
        if (level === o.level) {
          obj = o;
        }
      });
  
      fileTransfer.onProgress(progress => {
  // 这里改变了百分比，虚拟机里更新了，但效果也不理想，手机上一直到最后才更新
        obj.status = progress.loaded === progress.total ? '100%' : Math.floor(progress.loaded / progress.total * 100) + '%';
      });
  
      fileTransfer.download(url, this.file.dataDirectory + `${level}.zip`).then((entry) => {
        obj.status = '下载成功';
        console.log('download complete: ' + entry.toURL());
        this.zip.unzip(entry.toURL(), this.file.dataDirectory + obj.level).then(result => {
          if (result === 0) {
            obj.status = '解压完成';
          }
          if (result === -1) {
            obj.status = '解压失败';
          }
        });
      }, (error) => {
        obj.status = '下载失败';
        console.log('download error', error);
      });
  
    }

• Parry 回复 提问者 qq_Mel_0 #3

  你在 console.log 里输出 obj.status 是一直变化的吗？还是绑定到页面就不变化了？

点开查看后面4条评论