Angular-Slickgrid 下拉框过滤器在每次单击过滤器后在网格下方弹出额外的下拉框

Question

我正在使用 Angular 版本 11 和 Angular-Slickgrid 版本 2.23.0

我在 Angular-Slickgrid 中添加了一个下拉框过滤器。过滤功能没问题，但是每次点击过滤的时候，格子下面会多出一个下拉框，刷新页面才会消失。

如果我一直点击过滤器，就会出现越来越多的额外下拉框。看起来网页上只有一个额外的框，但是当我打开 html 元素时，我可以看到生成的下拉元素列表。

我查看了Angular-Slickgrid官方demo页面关于filter，每次点击filter的时候，在html页面底部会生成一个下拉元素，有一个位置，当我再次单击过滤器时，下拉元素消失了。这是它应该的工作方式，但是当我单击过滤器时下拉框元素没有消失。

请查看下面的源代码。在调试期间，我删除了所有不必要的代码以仅保留一列，但问题仍然存在。这个问题存在于我项目中的所有下拉框过滤器中。其他只有文本的过滤器效果很好。

非常感谢您的帮助。

Answer 1

谁有这个问题，在外面讨论过，原来是因为页面中有多个body。为什么这是问题的解释，Angular-Slickgrid 使用 multiple-select.js 外部库，下拉列表实际上是过滤器输入下的位置，当我们说（位置）时，我们真正的意思是重新定位（通过下拉列表的绝对位置）移动到输入下方，在 Angular-Slickgrid 中我们使用容器作为 body 因为这是让它显示在其他所有内容上的唯一方法，因此只能一个 body 才能正常工作。

Angular-Slickgrid 使用的默认 multiple-select 选项是

const defaultOptions: MultipleSelectOption = {
  autoAdjustDropHeight: true,
  autoAdjustDropPosition: true,
  autoAdjustDropWidthByTextSize: true,
  container: 'body', // <<-- we use `body` for positioning over everything
  filter: false, 
  maxHeight: 275
};

Angular-Slickgrid 下拉框过滤器在每次单击过滤器后在网格下方弹出额外的下拉框

Angular-Slickgrid drop down box filter pops extra drop down boxes below grid after each click on filter

angular

filter

slickgrid

angular-slickgrid