Раскрывающийся список опций mat-autocomplete не привязывается

Question

В моем приложении Angular я использую функцию автозаполнения из Angular Материал :

Работает нормально, за исключением случаев, когда я прокручиваю страницу:

В основном, при прокрутке выпадающий список не удерживается на своем месте, и я не могу понять, почему.

На официальной странице документации материалов это работает хорошо, автоматически обновляя свойства элемента top и left. Однако в моем приложении этого не происходит.

Answer 1

Проведя некоторое исследование, я нашел решение, опубликованное omaracrystal на github .

Что мне нужно было сделать:

1) Импортируйте ScrollingModule из Angular 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>