滚动时垫自动完成选项下拉不会粘住

Question

在我的 Angular 应用程序中，我使用了Angular Material的自动完成功能：

它工作正常，除非我滚动页面：

基本上下拉菜单在滚动时不会固定在它的位置，我不知道为什么。

在官方的 Material 文档页面中，它通过自动更新元素的top和left属性来很好地工作。但是，这不会发生在我的应用程序中。

Answer 1

首先，我们需要能够使用 autoComplete 方法，因此我们必须从视图中获取此控件。添加 id：#autoCompleteInput

     <input
        #autoCompleteInput
        type="text"
        class="form-control"
        matInput
        [matAutocomplete]="auto"
        formControlName="country"
        (input)="filterCountries($event.target.value)"
      />

在组件中：

@ViewChild('autoCompleteInput', { read: MatAutocompleteTrigger })
  autoComplete: MatAutocompleteTrigger;

现在我们将 autoComplete 作为变量。接下来我们需要一个滚动事件：

ngOnInit(): void {
    window.addEventListener('scroll', this.scrollEvent, true);
}

最后向组件添加一个函数：

scrollEvent = (event: any): void => {
    if(this.autoComplete.panelOpen)
      // this.autoComplete.closePanel();
      this.autoComplete.updatePosition();
};

参考：起源

Answer 2

在做了一些研究之后，我在github上找到了omaracrystal发布的解决方案。

我需要做的是：

1）导入ScrollingModule所述的角CDK

import { ScrollingModule } from '@angular/cdk/scrolling';

@NgModule({
  imports: [
    // ...
    ScrollingModule,
  ],
  // ...
})
export class MyAppModule { }

2) 找到包含我的自动完成输入的最外层 div 并应用cdkScrollable指令：

<div cdkScrollable>
  <!-- the autocomplete is located somewhere here, not necessarily as direct child -->
</div>