Неправильное отображение меню выбора углового материала

Question

Я использую Angular Material для своего проекта, я использую опцию select, но расположение раскрывающегося меню портится при открытии.

1-й:

2-й:

В первом выпуске показано, что раскрывающийся список выглядит намного выше, чемэлемент выбора.Вторая проблема показывает, что опции появляются над элементом 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 { }