滚动时 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屋！