Angular Material Select菜单无法正确显示

Question

我正在为我的项目使用Angular Material， 我正在使用一个选择选项，但打开时下拉的定位会混乱。

第一名：

第二名：

第一个问题显示下拉列表比select元素高得多。 第二个问题显示选项元素上方的选项，但这是页面的底部，因此无法看到/选择第一个选项后的任何内容。

我正在使用的代码是：

<mat-form-field>
  <mat-select placeholder="Favorite food" disableOptionCentering>
    <mat-option value="Pizza">
      Pizza
    </mat-option>

    <mat-option value="Taco">
      Taco
    </mat-option>

    <mat-option value="Kebab">
      Kebab
    </mat-option>

    <mat-option value="Burgers">
      Burgers
    </mat-option>
  </mat-select>
</mat-form-field>

这是直接从Angular Material网站获取的。我还尝试添加“disableOptionCentering”作为参数，以禁用选项的居中，但它不起作用。

感谢任何帮助。

谢谢

Answer 1

我确定您已经，但请务必遵循本指南中的所有内容：https://material.angular.io/guide/getting-started

您是否正确安装了@ angular / animations并记得导入BrowserAnimationsModule？

import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
@NgModule({
  ...
  imports: [BrowserAnimationsModule],
  ...
})
export class PizzaPartyAppModule { }