角材料选择框显示不正确

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>