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

问题描述

我有几个使用 CDK 中新 Virtual for 的多角度材质多选.

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

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

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

将其应用到 HTML 中，在 mat-select 的底部:

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-for 进行多选，使其看起来没有被选中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！