滚动时 mat-autocomplete 选项下拉列表不粘连 [英] mat-autocomplete options dropdown does not stick when scrolling
问题描述
在我的 Angular 应用中,我使用了
它工作正常,除非我滚动页面:
基本上滚动时下拉菜单没有固定在它的位置,我不知道为什么.
在官方的 Material 文档页面中,通过自动更新元素的 top
和 left
属性,效果很好.但是,这不会发生在我的应用中.
经过一番研究,我找到了 omaracrystal 在 github.
我需要做的是:
1) 导入Angular CDK的ScrollingModule
>
import { ScrollingModule } from '@angular/cdk/scrolling';@NgModule({进口:[//...滚动模块,],//...})导出类 MyAppModule { }
2) 找到包含我的自动完成输入的最外层 div 并应用 cdkScrollable
指令:
<!-- 自动完成位于此处的某处,不一定是直接子项-->
In my Angular app, I'm using the autocomplete feature from Angular Material:
It works fine, except when I scroll the page:
Basically the dropdown does not stick in its position when scrolling and I can't figure out why.
In the official Material documentation page, it works well by automatically updating the top
and left
properties of the element. However, this does not happen in my app.
After doing some research, I've found a solution posted by omaracrystal on github.
What I needed to do is to:
1) Import the ScrollingModule
of the Angular CDK
import { ScrollingModule } from '@angular/cdk/scrolling';
@NgModule({
imports: [
// ...
ScrollingModule,
],
// ...
})
export class MyAppModule { }
2) Find the outermost div that contains my autocomplete input and apply the cdkScrollable
directive:
<div cdkScrollable>
<!-- the autocomplete is located somewhere here, not necessarily as direct child -->
</div>
这篇关于滚动时 mat-autocomplete 选项下拉列表不粘连的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!