javascript - 进度百分比可以在控制台中看到，但在 html 中看不到

Question

我想在 html 中显示文件上传进度，但在控制台中可以看到它时却没有显示。造成这种行为的可能原因是什么？

如果我执行console.log(this.progress)，它可以在控制台中看到，但不能在html中看到{{progress}}

html

<div class="document-upload-tab">
  <button mat-button (click)="select()">
    <img src="assets/svg/cloud-upload.svg" /> {{text}}
  </button>
  <br/>

  <input type="file" id="fileUpload" name="fileUpload" accept="application/pdf,application/vnd.ms-excel" style="display:none;"
  />
  <button mat-raised-button (click)="save()">
    Save
  </button>
</div>
<ng-container *ngIf="fileSelected">
  {{progress}}percentage
  <mat-progress-bar [value]="progress"></mat-progress-bar>
</ng-container>

ts

 select() {
    console.log('here');
    const fileUpload = document.getElementById(
      'fileUpload'
    ) as HTMLInputElement;
    console.log(fileUpload);
    fileUpload.onchange = () => {
      this.file = fileUpload.files.item(0);
    };
    fileUpload.click();
  }

  save() {
    console.log(this.file);
    this.fileSelected = true;
    this.uploadfile(this.file)
      .then(res => {
        console.log(res);
      })
      .catch(err => {
        this.toastr.info('', 'Error while uploading file!', {
          positionClass: 'toast-top-center',
          closeButton: true
        });
      });
  }

  uploadfile(file) {
    console.log(file);
    const bucket = new S3({
      accessKeyId: environment.accessKeyId,
      secretAccessKey: environment.secretAccessKey,
      region: environment.region
    });

    const params = {
      Bucket: environment.Bucket,
      Key: file.name,
      Body: file
    };
    const options = {
      // Part Size of 10mb
      partSize: 10 * 1024 * 1024,
      queueSize: 1,
      // Give the owner of the bucket full control
      ACL: 'bucket-owner-full-control'
    };

    const upload = bucket
      .upload(params, options)
      .on('httpUploadProgress', function(event) {
        this.progress = Math.round((event.loaded / event.total) * 100);
        console.log(this.progress);
        this.toastr.info(this.progress);
        return event;
      });
    const promise = upload.promise();
    return promise;
  }

Answer 1

将httpUploadProgress回调函数更改为箭头函数。看起来它没有绑定(bind)到这个类。

const upload = bucket.upload(params, options)
    .on('httpUploadProgress', (event) => { // change here
        this.progress = Math.round((event.loaded / event.total) * 100);
        console.log(this.progress);
        this.toastr.info(this.progress);
        return event;
    });