Question

我遇到使用Angular2 version 4的情况，其中文件上传进度条显示在对话框中。问题是除非我点击对话框，进度条没有“移动”，这意味着它不会“进展”。

显示对话框

import { ModalComponent } from "ng2-bs3-modal/ng2-bs3-modal";
@Component({
   selector: "my-selector",
   templateUrl: "app/my/my.html"
})
export class FileUploadComponent implements OnInit, OnDestroy {

  @ViewChild('myModal')
  fileUploadModal: ModalComponent;

  ngOnInit(): void {
    this.progressEvent = this.progressService.progressEvent$.subscribe(event => {
      this.progress = event.percentCompleted;
      this.speed = event.uploadSpeed;
      this.timeRemaining = event.uploadTimeRemaining;
      this.cdr.detectChanges();

      console.log(this.progress, this.speed, this.timeRemaining);
   });
  }
  open(): void {
    this.fileUploadModal.open();
  }
}

模板标记：

<modal #myModal>
<modal-header [show-close]="true">
  <h4 class="modal-title">Upload File</h4>
</modal-header>
<form (ngSubmit)="onSubmit()" #modalForm="ngForm">
<modal-body>      
    <input type="file" #fileInput (change)="fileChangeEvent($event)" name="myfile" class="form-control" />
</modal-body>
<modal-footer>
    <div class="progress" style="float: left; width: 60%">
      <!--<div class="progress-bar" role="progressbar" [attr.aria-valuenow]="progress" aria-valuemin="0" aria-valuemax="100" [style.width]="(progress/100)*100 + '%'"></div>-->
      <div class="progress-bar" role="progressbar" [ngStyle]="{ 'width': progress + '%' }"></div>
    </div>
    <div style="float:right;">
        <button type="button" class="btn btn-default" data-dismiss="modal" (click)="myModal.dismiss()">Cancel</button>
        <button type="submit" class="btn btn-primary" [disabled]="!modalForm.valid">Save</button>
    </div>
</modal-footer>
</form>

这是我绑定的方式：

<div class="progress-bar" role="progressbar" [attr.aria-valuenow]="progress" aria-valuemin="0" aria-valuemax="100" [style.width]="(progress/100)*100 + '%'"></div>

也尝试过：

<div class="progress-bar" role="progressbar" [ngStyle]="{ 'width': progress + '%' }"></div>

我可以在控制台中看到progress，speed和timeRemaining变量正在正确更新。

我错过了什么？

除非点击，否则文件上传进度条不会“移动”

0 个答案: