时间戳

首页 > 解决方案 > Angular CDK 虚拟滚动不会一次选择 matselect 中的所有列大型数据集

angular - Angular CDK 虚拟滚动不会一次选择 matselect 中的所有列大型数据集

问题描述

我有一个像这样带有虚拟滚动的角度的垫选择。

<mat-select [formControl]="multiSelectControl" multiple [value]="selected" (openedChange)="openChange($event)">
  <cdk-virtual-scroll-viewport itemSize="5" minBufferPx="200" maxBufferPx="400" [style.height.px]=5*48>
    <button (click)="selectAll()">Select All</button>
    <button (click)="clear()">Clear</button>
    <mat-option *cdkVirtualFor="let topping of toppingList" [value]="topping" (onSelectionChange)="onSelectionChange($event)">{{topping}}</mat-option>
  </cdk-virtual-scroll-viewport>
</mat-select>

.ts 文件：

@ViewChildren(MatOption)
options: QueryList<MatOption>;

constructor(private cd: ChangeDetectorRef) {}

ngAfterViewInit(): void {
  this.options.changes.subscribe(() => {
    let needUpdate = false;

    this.options.forEach((option) => {
      const selected = this.selected.includes(option.value);
       if (selected && !option.selected) {
        option.select();
        needUpdate = true;
      } else if (!selected && option.selected) {
        option.deselect();
        needUpdate = true;
      }
    });
    if (needUpdate) {
      this.cd.detectChanges();
    }
  });
}

onSelectionChange(change): void {
  if (!change.isUserInput) {
    return;
  }

  const value = change.source.value;
  const idx = this.selected.indexOf(change.source.value);

  if (idx > -1) {
    this.selected.splice(idx, 1)
  } else {
    this.selected.push(value);
  }
}

带有stackblitz链接。

如果我单击全选并更快地滚动，则所有元素都不会被选中，就像它们需要时间才能被选中一样。有什么方法可以提高性能。

标签： angularangular-materialscrollbar

解决方案

一个选项是收听滚动Observable的ScrollDispatcher：

  ngAfterViewInit(): void {
    this.sd.scrolled().pipe(
      filter((scrollable) => this.cdkVirtualScrollViewPort === scrollable)
    ).subscribe(() => {
      let needUpdate = false;

      this.options.forEach((option) => {
        const selected = this.selected.includes(option.value);

        if (selected && !option.selected) {
          option.select();
          needUpdate = true;
        } else if (!selected && option.selected) {
          option.deselect();
          needUpdate = true;
        }
      });

      if (needUpdate) {
        this.cd.detectChanges();
      }
    });
  }

你可能会去抖动事件，这样它就不会被触发太多。我已经用这个解决方案更新了 stackblitz

堆栈闪电战

推荐阅读