Проблема производительности в Mat Multi Select с большим набором данных

Question

Я пытаюсь создать приложение, в котором я взял Mat Select, содержащий около 4000 предметов внутри. Я привязан к * ngFor.

Мне нужно выбрать All и Clear All. Когда я выбираю «Выбрать все», для выбора всех требуется около 10 секунд.

Есть ли какая-нибудь идея, которую я могу улучшить в ее производительности? Любая помощь будет высоко ценится.

Вот мои коды-

app.component. html

<mat-list-item class="primary-imenu-item" role="listitem">
  <mat-form-field class="select-form">
      <mat-select 
      placeholder="Years" 
      name="year" 
      class="filter-select" 
      [(ngModel)]="selectedYears" 
      [compareWith]="equals"
      multiple 
      #yearSelect *ngIf="iszoom">
        <mat-option disabled="disabled" class="filter-option">
          <button 
          mat-raised-button 
          class="mat-primary fill text-sm" 
          (click)="selectAll(yearSelect, years, selectedYears)">Select All
          </button>
          <button 
          mat-raised-button 
          class="mat-accent fill text-sm" 
          (click)="deselectAll(yearSelect)">
          Deselect All
          </button>
        </mat-option>
        <mat-option *ngFor="let year of years" [value]="year">
          {{year.viewValue}}
        </mat-option>
      </mat-select>
  </mat-form-field>
</mat-list-item>

приложение .component.ts

import { Component, ViewChild, ViewChildren, QueryList, ChangeDetectorRef, Inject } from '@angular/core';
import { FormControl } from '@angular/forms';
import { CdkVirtualScrollViewport } from '@angular/cdk/scrolling';
import { MatOption } from '@angular/material/core';
import { MatSelect } from '@angular/material';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  selectedYears: any[];
  years: any[] = [];
  iszoom = true;

  constructor() {
    this.yearupdate();
  }

  equals(objOne, objTwo) {
    if (typeof objOne !== "undefined" && typeof objTwo !== "undefined") {
      return objOne.id === objTwo.id;
    }
  }

  selectAll(select: MatSelect, values, array) {
    select.value = values;
    array = values;
  }

  deselectAll(select: MatSelect) {
    this.selectedYears = [];
    for (var i = 0; i < select.value.length; i++) {
      select.value[i] = [];
    }

    this.yearupdate();
  }

  yearupdate() {
    this.years = [];
    for (var i = 0; i < 4000; i++) {
      this.years.push({
        id: i,
        viewValue: "test-" + i
      });
    }
  }

}

Обратите внимание, мне нужно, чтобы он работал на Angular CLI 7.3.9

Еще раз, любая помощь будет высоко ценится.

Answer 1

Мне удалось работать с помощью виртуальной полосы прокрутки. Вот рабочий пример для того же: https://stackblitz.com/edit/angular-multi-select-virtual-scroll

И блог для того же: https://blog.enginesoft.in/angular-material-multi-select-all-with-large-dataset/