如何以角度分隔单个和多个文件的拖放事件

Question

这是角度为6的基本拖放工作文件。 现在的问题： 当我将一个文件放到reader.onprogress事件中时，它会显示进度条2秒钟并将其隐藏，并且对多个文件也是如此。 但是，当我再次放下新文件时，进度条再次出现在已经放下的旧放文件中。其次进度条不会从0到100％已经是100％，可能是因为我在本地删除文件。有没有办法让我可以从桌面上本地删除文件的同时显示进度栏的0到100％增量。

HTML：

<div class="main-content" (dragover)="onDragOver($event)" (dragenter)="onDragEnter($event)" (drop)="onDrop($event)"
  #mainContentBox>
  <div class="main-content-inner">
    <div class="container-fluid">
      <div class="row">
        <div class="col-md-3" *ngFor="let file of files">
          <div>
            <div class="file-container">
              <img [src]="file.src" alt="" class="img-fluid">
              <div class="file-info">
                <p class="title">{{file.name}}</p>
              </div>
              <div class="progress" style="height:5px" [@showHide]="isVisible">
                <div class="progress-bar" style="height:5px" [ngStyle]="{'width': pgWidth}"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

TypeScript代码：

@Component({
  selector: 'qr-documents',
  templateUrl: './documents.component.html',
  styleUrls: ['./documents.component.css'],
  animations: [
    trigger('showHide', [
      state('on', style({'display':'block', 'opacity': 1})),
      state('off', style({'display': 'none', 'opacity': 0})),
      transition('on=>off', animate('0ms ease-in-out'))
    ])
  ]
})
export class DocumentsComponent implements OnInit {
  title: string;
  files: Array<any> = [];
  isVisible:string = 'on';
  pgWidth;
  fileContainerOverlay:string = 'on';

  constructor(private globalService: GlobalService, @Inject(DOCUMENT) private document: Document, private renderer: Renderer2) { }

  ngOnInit() {
    this.title = this.globalService.getBreadCrumb();

    window.addEventListener('dragover', (e) => {
      e.preventDefault()
    }, false)

    window.addEventListener('drop', (e) => {
      e.preventDefault()
    }, false)
  }

  onDragOver(e) {
    //console.log(e);

  }

  onDragEnter(e) {
    console.log(e);

  }

  onDrop(e) {
    this.isVisible = 'on';
    for(let i = 0; i < e.dataTransfer.files.length; i++) {
      let reader = new FileReader();
      let file = e.dataTransfer.files[i]    
      reader.readAsDataURL(file);

      reader.onprogress = (e) => {
        if(e.lengthComputable) {
          let loaded = Math.round((e.loaded/e.total)*100)
          let zeros = '';

          if(loaded >= 0 && loaded < 10) {
            zeros = '00';
          } else if(loaded < 100) {
            zeros = '0'
          }

          this.pgWidth = loaded+'%';

          if(loaded == 100) {
            setTimeout(()=>{
              this.isVisible = 'off';
            },500)
          }
        }
    }

      reader.onloadend = async () => {
        let promise = new Promise((resolve, reject)=>{
          resolve(reader.result)
        })

        let result = await promise;
        this.files.push({
          'name': file.name,
          'src': result
        })
      }      
    }    
  }

}