垫选择下拉选项未对齐

Question

我对 Angular 还很陌生，正在使用 mat-select 模块创建一个下拉菜单。 虽然我能够创建下拉菜单，但 mat-options 并未在下拉选择器下方居中。 选择器位于页面顶部，选项显示在页面最底部。 这是我的代码：

  <mat-form-field appearance="fill">
            <mat-select [(ngModel)]="sortType" (ngModelChange)="applyFilter()">
              <mat-option value="likelihood">Match Likelihood</mat-option>
              <mat-option value="distance">Distance</mat-option>
            </mat-select>
        
  </mat-form-field>

这篇文章描述了一个类似的问题，我已经尝试了建议的解决方案。 也没有应用额外的 CSS 样式。 有没有办法让选项直接出现在下拉菜单下方？

Answer 1

这是一般行为。 如果有足够的空间，下拉列表中的选定选项必须与触发器对齐。 您可以通过设置disableOptionCentering属性来禁用此行为。