Question

目前，我有一个应用程序，它读取包含大量数据的多个CSV文件，并对内容进行一些计算，转换，解析，追加和格式化，然后在列表中预览清理后的数据（最终形式）对话框。

过程

  // Call to read the files
  fileReader(files: FileList, i: number): void {
    const self = this;
    const file = files[i];
    const reader = new FileReader();

    reader.readAsBinaryString(file);
    reader.onload = function (e) {
      self.fileReloader(e, files, i);
    };
  }


  // Perform process of all file content while there is some to read
  // otherwise end the process.
  fileReloader(e: any, files: FileList, i: number): void {
    const bin = e.target.result;

    try {

      // Do parsing, converting the content of CSV file.
      ... Omitted lengthy codes


      // Load another file if there is any.
      if (i < files.length - 1) {
        // Load the next file
        this.fileReader(files, i + 1);

      } else {

        // If there is none to CSV files to read at this point which ends
        // the whole process and opens a dialog.

      }

    } catch (error) {
      throw something_good;
    }
  }

用法

  onFileSelect(e: any): void {
    const target: DataTransfer = <DataTransfer>(e.target);
    this.fileReader(target.files, 0);
  }

正如您所看到的，这是一个递归调用，其中发生了一些冗长的过程。但是，当流程进展时，如何确定进度条100％的值和增量？我可以通过在进度条中使用不确定模式来实现这一点，但我想要一个确定模式。

Answer 1

我会Subject<number>()从0 - 100发出值然后我会让进度条订阅值

<mat-progress [value]="progressSubject$ | async"></mat-progress>

通过了解您要读取的文件数量，您可以确定百分比值。

const filePercent = 100 / (files.length - 1); // how many percent each file represents.

然后在每个文件完成后处理调用

progressSubject.next(filePercent * i);

如何在执行函数和方法调用时确定mat-progressbar中的百分比值？

1 个答案: