角材料选择框未正确显示

Question

我是一个使用 Angular Material 的 Angular 8 项目，我有一个表单，我需要在其中添加一个具有这种样式的选择框：

注意标签“选择一个选项”的样式如何位于行的中间。

html代码：

<mat-form-field>
  <mat-label> Select an option</mat-label>
  <mat-select>
    <mat-option *ngFor="let type of types" [value]="type">{{type}}</mat-option>
  </mat-select>
</mat-form-field>

ts 代码：

types: string[] = [
    'Charmander', 'Bulbasaur', 'Squirtle'
  ];

我在文档中的任何地方都找不到如何使“选择一个选项”保持在行的中间。 这是stackblitz link

有人可以帮帮我吗？

Answer 1

将外观设置为如下轮廓：

<mat-form-field appearance="outline">
    <mat-label> Select an option</mat-label>
    <mat-select>
        <mat-option *ngFor="let type of types" [value]="type">{{type}}</mat-option>
    </mat-select>
</mat-form-field>