角材料选择选项放置不正确

我正在尝试将最简单的select示例集成到我的应用程序中。我的应用程序包含一些可能会影响选择的样式。但是就我而言，这种行为很奇怪。所以这是代码。

<mat-form-field>
  <mat-label>Favorite food</mat-label>
  <mat-select>
    <mat-option *ngFor="let food of foods" [value]="food.value">
      {{food.viewValue}}
    </mat-option>
  </mat-select>
</mat-form-field>

编译后，将包含所有内容的mat-options放在页面底部，并且不在mat-form-field之外。我不知道为什么会这样。有任何想法吗 ？