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

时间:2018-03-02 07:36:07

标签: angular angular-material2

目前,我有一个应用程序,它读取包含大量数据的多个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%的值和增量?我可以通过在进度条中使用不确定模式来实现这一点,但我想要一个确定模式。

1 个答案:

答案 0 :(得分:2)

我会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);