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

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

0 голосов
/ 11 января 2019

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

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

Вот альбом imgur, отображающий мою проблему: https://imgur.com/a/8CVXulD

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

1 Ответ

0 голосов
/ 16 января 2019

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

Примените это в HTML, в нижней части циновки выберите: 

<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

...