Angular 7 - Виртуальная полоса прокрутки сбрасывает выбранный элемент в мультиселекте при прокрутке - PullRequest
Новая
       8

Angular 7 - Виртуальная полоса прокрутки сбрасывает выбранный элемент в мультиселекте при прокрутке

1 голос
/ 18 апреля 2020

У меня есть выпадающий список с несколькими виртуальными полосами прокрутки.

Html

<mat-form-field>
  <mat-label>Toppings</mat-label>
  <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">{{topping}}</mat-option>
    </cdk-virtual-scroll-viewport>
  </mat-select>
</mat-form-field>

.ts файл: 

export class AppComponent {
  title = 'test-proj';

  toppings = new FormControl();
  toppingList: string[] = ['Extra cheese', 'Mushroom', 'Onion', 'Pepperoni', 'Sausage', 'Tomato'];
  selected: any;

  @ViewChild(CdkVirtualScrollViewport)
  cdkVirtualScrollViewPort: CdkVirtualScrollViewport;

  multiSelectControl = new FormControl();

  constructor() {
    for (let i = 0; i < 4000; i++) {
      this.toppingList.push('gjkgkf--' + i);
    }
  }

  selectAll() {
    this.selected = this.toppingList;
    this.multiSelectControl.patchValue(this.toppingList);
  }

  clear() {
    this.selected = [];
    this.multiSelectControl.patchValue([]);
  }

  openChange($event: boolean) {
    if ($event) {
      this.cdkVirtualScrollViewPort.scrollToIndex(0);
      this.cdkVirtualScrollViewPort.checkViewportSize();
    }
  }

Я добавил 4000 предметов в выпадающем списке. Если я выберу первые 2 элемента, а также последние два элемента и свитки, проверка выбора первых двух элементов исчезнет.

Пожалуйста, предложите. Спасибо

1 Ответ

2 голосов
/ 18 апреля 2020

Я создал своего рода обходной путь для самой ошибки. Он использует onSelectionChange элемента mat-option. Кроме того, он также проверяет изменения в списке параметров и выбирает их при необходимости. Это сырой неоптимизированный код, но вы поймете: 

@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);
  }
}

И это mat-select: 

<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>

С работающим stackblitz

Имейте в виду, что если у вас есть динамические списки c, которые могут обновить его содержимое, и сделанный выбор удаляется из этого списка, он все равно будет выбран, даже если это должно больше невозможно

...