角材料选择框显示不正确

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链接

有人能帮助我吗？

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>