Question

我有几个使用CDK中的新Virtual进行的有角材质多重选择。

当您选择几个项目并将其滚动到视图外时，从而将它们从虚拟对象中删除，然后关闭选择，看起来好像输入已被删除，但是当打开选择并向上滚动时，您会看到他们仍然处于选中状态。

这是一张显示我的问题的imgur专辑： https://imgur.com/a/8CVXulD

我能想出的唯一解决方法是，我可以检测到关闭选择的时间并将所选择的项目重新排序到列表的顶部，并保留虚拟滚动条。

Answer 1

所以我最终使用包含所选表单选项的容器找到了解决此问题的方法

在mat-select底部的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问题上向danderwald致谢：https://github.com/angular/material2/issues/13087

使用cdk-virtual-进行多次选择，使其看起来好像什么都没有被选择

1 个答案: