Multi-select с cdk-virtual-для того, чтобы он выглядел так, как будто ничего не выбрано

Question

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

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

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

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

Answer 1

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

Примените это в 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