javascript - 使用 *ngIf 加载微调器在函数执行期间未显示

Question

如果在执行函数时尝试显示加载微调器。我已经尝试过不同的方法，但微调器不会显示。

这是 HTML:

<div class="row pt-3" id="firstRow">
 <div class="col">
  <button class="btn btn-dark back-button">
   <fa name="upload"></fa>
   <span>Load .csv file</span>
  </button>
  <input type="file" #fileImportInput name="File Upload" class="txtFileUpload p-3" (change)="fileChangeListener($event)" accept=".csv" />
    <img class="spinner" *ngIf="loading" src="../../../assets/img/gif-spinner/Spin-2s-200px.gif" />
 </div>
</div>

这是TS代码的一部分

export class MotionAnalysisComponent implements OnInit {
loading = false;

 fileChangeListener($event: any): void {
   this.loading = true;

   let files = $event.srcElement.files;

   if (this.isCSVFile(files[0])) {
    let input = $event.target;
    let reader = new FileReader();
    reader.readAsText(input.files[0]);

    reader.onload = () => {
     let csvData = reader.result;
     let csvRecordsArray = (<string>csvData).split(/\r\n|\n/);
     this.csvRecords = this.getDataRecordsArrayFromCSVFile(csvRecordsArray, 4);
   };

   reader.onerror = function () {
    alert('Unable to read ' + input.files[0]);
   };
  } else {
    alert("Please import valid .csv file.");
    this.fileReset();
  }

   this.loading = false;

如果我在函数中注释掉“this.loading = false”，那么微调器将在函数执行后显示并且(显然)不会消失。那么我怎样才能让 HTML 理解在函数执行期间应该显示微调器呢？

Answer 1

为了让微调器有时间初始化，您可以在将 loading 设置为 true 后异步运行代码。这可以通过将代码移动到 setTimeout 回调中来实现。 loading 属性应在该回调方法结束时重置。

fileChangeListener($event) {
  this.loading = true;                    // First, set loading property
  setTimeout(() => {                      // Call setTimeout to run code asynchronously
    let files = $event.srcElement.files;
    if (this.isCSVFile(files[0])) {
      ...
    } else {
      ...
    }
    this.loading = false;                 // Reset loading before leaving callback method
  }, 0);
}

参见 this stackblitz一个演示。请注意，如有必要，您可以增加 setTimeout 延迟(在上例中设置为 0 毫秒)。