带有虚拟滚动条的 PrimeNG 下拉列表无法保持选择可见

PrimeNG dropdown with virtual scroll not keeping selection in view

我正在使用 PrimeNG 启用了自定义过滤和虚拟滚动的下拉组件。

我发现该组件在重新打开时并没有滚动回视图项目列表中的最后一个选择,而是只是滚动回列表顶部,这意味着您必须实际滚动到去找到所做的选择。

看这个例子stackblitz

我确实遇到了一个解决方案 ,它讨论了在 CdkVirtualScrollViewport 实例上调用 scrollToIndex,这听起来对我有用。但是当我试图将它合并到我的代码中时,我的实例变量出现为未定义。

有谁知道正确的方法是什么?我正在使用 PrimeNG 7.1.3。

谢谢

如果 PrimeNG 不修改其组件以在下拉组件上添加滚动方法,或者更好的是 属性 来决定是否应自动滚动所选项目,我认为无论如何都无法解决此问题到下拉菜单打开时。 (或者它甚至应该一直这样做,比如非虚拟模式)

说明

使用 ViewChild(在 componentA 上说)(即使像您那样使用 forwardRef)也不会奏效,因为它只能从 child 直接访问组件componentA 的模板(包含下拉列表的模板),但它无法从 child 组件的模板(即 PrimeNG 下拉组件本身)访问 children。

使用 ContentChild 同样的事情,这是 design

你的示例中有一个 grandparent 组件 (AppComponent)、一个 child (Dropdown) 和一个 grand child (CdkVirtualScrollViewport).

来自 SO 的大多数答案从大 parent 组件访问大 child 组件建议:

  • 在child组件中添加一个@ViewChild(GrandChildComponent) grandChild
  • 在grandparent组件中添加一个@ViewChild(ChildComponent) child
  • 从grandparent,使用this.child.grandChild访问grandchild

但这在这里不起作用,因为 child 组件是您无法控制的第 3 方组件。所以这就是为什么我认为最好建议改进 PrimeNG

这是由于 this issue 已在版本 8.0.1 中解决 this PR。所以升级primeng来解决这个问题。

我还打开了 another issue 说明了与 保持选中的项目在视图中,并在合并此 PR 时提出 fix PR 所有与选择保持一致的问题都将得到解决。