使用cdk-virtual-进行多重选择，使其看起来像什么都没有被选择 [英] Multi-select with cdk-virtual-for making it look like nothing was selected

问题描述

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

I have a couple of angular material multi-selects that are utilizing the new Virtual for in the CDK.

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

When you select a couple of items and scroll them out of view, thus dropping them from the virtual for and then close the select, it looks like the inputs were dropped, but when opening up the select and scrolling back up you see they are still selected.

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

Here is an imgur album displaying my issue: https://imgur.com/a/8CVXulD

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

The only workaround I've been able to come up with is that I can detect when the select is closed and reorder the selected items to the top of the list, as well as rest the virtual scroll.

推荐答案

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

So I ended up finding the solution to this issue, using a container that contains the selected form options

在mat-select底部的HTML中应用它:

Apply this in the HTML, at the bottom of the 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问题上向danderwald致谢: https://github.com/angular/material2/issues/13087

Credit to danderwald on this github issue: https://github.com/angular/material2/issues/13087

这篇关于使用cdk-virtual-进行多重选择，使其看起来像什么都没有被选择的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！