angular - 角材料选择框未正确显示

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

有人能帮助我吗？

标签： angularangular-materialmaterial-designangular8

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>