Multi-select with cdk-virtual-for 使它看起来像什么都没有被 selected

Question

我有几个 angular material multi-select 在 CDK 中使用新的 Virtual for。

当您 select 几个项目并将它们滚动到视图之外，从而将它们从虚拟 for 中删除然后关闭 select 时，看起来输入已被删除，但是当打开 select 并向上滚动，您会看到它们仍然是 selected。

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

我能想出的唯一解决方法是，我可以检测到 select 何时关闭，并将 selected 项目重新排序到列表顶部，以及作为休息的虚拟卷轴。

Answer 1

所以我最终找到了这个问题的解决方案，使用包含 selected 表单选项的容器

在垫子底部的HTML中应用这个-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 问题上归功于 danderwald：https://github.com/angular/material2/issues/13087

Multi-select with cdk-virtual-for 使它看起来像什么都没有被 selected

Multi-select with cdk-virtual-for making it look like nothing was selected

angular-material

angular

angular-cdk

angular7