Множественный выбор с помощью cdk-virtual-для того, чтобы казалось, что ничего не было выбрано

У меня есть несколько множественных выборок материалов angular, которые используют новый Virtual for в CDK.

Когда вы выбираете пару элементов и прокручиваете их из поля зрения, тем самым удаляя их из виртуального окна, а затем закрывая выбор, кажется, что входы были отброшены, но при открытии выбора и прокручивании назад вы видите, что они все еще остаются выбрано.

Вот альбом imgur с моей проблемой: https://imgur.com/a/8CVXulD

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


angular angular-material angular7 angular-cdk
person Drbarber    schedule 10.01.2019    source источник
comment
Я сталкиваюсь с той же проблемой для списка выбора коврика   -  person zhonglin yang    schedule 08.03.2021

Ответы (1)


arrow_upward
0
arrow_downward

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

Примените это в HTML в нижней части mat-select:

<ng-container *ngIf="isMultiple">
    <mat-option class="selected-options" *ngFor="let option of 
    this.form.value[control]" value="{{option}}">{{option}}</mat-option>
</ng-container>
<ng-container *ngIf="!isMultiple">
    <mat-option class="selected-options" *ngIf="this.form.value[control]" 
    value=" . 
    {{this.form.value[control]}}">{{this.form.value[control]}}</mat-option>
</ng-container>

css:

.selected-options{
  visibility: hidden;
  position: absolute;
}

Благодарим Дандервальда за эту проблему с github: https://github.com/angular/material2/issues/13087

person Drbarber    schedule 16.01.2019