Question

我面临的问题是，如果尝试像在数据多一点的情况下那样在表中显示数据，浏览器将关闭。

我正在尝试：

我正在将CSV文件直接上传到前端，并通过PapaParse立即对其进行解析。如果完成此步骤，则应在表格中向用户显示数据。 100行没问题，一切正常。我还为此表实现了过滤器，排序和分页。

但是当我有100000行或更多行时，浏览器就会死掉（当然）。

在加载时，它看起来像这样：

完成后看起来像这样（但这要花很多时间）

  onFileSelected(files: FileList) {

    console.log(files)
    console.log(files[0])

    this.csvIsParsing = true;

    let file = files[0];
    // xls is the same MIME type like csv
    let csvType = "application/vnd.ms-excel";
    let xlsxType = "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet";

    if (file.type !== csvType && file.type !== xlsxType) {
      this.wrongFileTypeError = true;
      this.csvIsParsing = false;
      return;
    } else if (files.length > 1) {
      this.tooManyFilesError = true;
      this.csvIsParsing = false;
      return;
    }

    this.fileName = file.name;
    this.checkFileSize(file.size);

    this.wrongFileTypeError = false;
    this.tooManyFilesError = false;

    if (files.length > 0 && file.type === csvType) { //temporarily

      this.csvParser.parse(file, {
        header: this.hasCsvHeader,
        skipEmptyLines: true,
        dynamicTyping: true,
        // dynamicTyping: true, lässt 0 verschwinden vor 010000
        encoding: "ISO-8859-1",
        complete: (result) => {
          console.log('Parsed: ', result.data);
          this.csvData = result.data;
          this.dataSource = new MatTableDataSource(result.data);
          this.dataSource.sort = this.sort;
          setTimeout(() => this.dataSource.paginator = this.paginator);
          for (let col in this.csvData[0]) {
            this.displayedColumns.push(col);
          }
          console.log(this.dataSource);
          this.csvIsParsing = false;
        }
      });
    }
  }

html看起来像这样：

<div>
    <button mat-button type="button" (click)="fileSelect.click()" matTooltip="{{ 'TOOLTIP_UPLOAD' | translate }}"
        matTooltipClass="accent-tooltip" matTooltipPosition="after" [matTooltipShowDelay]="globals.showDelay.value"
        [matTooltipHideDelay]="globals.hideDelay.value">Upload
        <fa-icon [icon]="['fas', 'upload']" size="lg"></fa-icon>
    </button>
    <button mat-button type="button" (click)="clearTable()" matTooltip="{{ 'TOOLTIP_UPLOAD' | translate }}"
        matTooltipClass="accent-tooltip" matTooltipPosition="after" [matTooltipShowDelay]="globals.showDelay.value"
        [matTooltipHideDelay]="globals.hideDelay.value">Clear
        <fa-icon [icon]="['fas', 'undo']" size="lg"></fa-icon>
    </button>
    <mat-progress-bar *ngIf="csvIsParsing" mode="indeterminate"></mat-progress-bar>

    <mat-form-field *ngIf="dataSource">
        <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
    </mat-form-field>
    <mat-table [dataSource]="dataSource" matSort class="mat-elevation-z8">

        <ng-container *ngFor="let disCol of displayedColumns; let colIndex = index" matColumnDef="{{disCol}}">
            <mat-header-cell mat-sort-header *matHeaderCellDef>{{disCol}}</mat-header-cell>
            <mat-cell *matCellDef="let element "> {{element[disCol]}}
            </mat-cell>
        </ng-container>

        <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
        <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
    </mat-table>
    <!-- change to ngIf dataSource-->
    <mat-paginator *ngIf="csvData" [pageSizeOptions]="[5, 10, 25, 100]"></mat-paginator>

    <h4 matLine>{{fileName}}</h4>

</div>

角表延迟从前端加载数据

0 个答案: