如何在 mat-select 中提供占位符

Question

如果用户没有在mat-select 中选择值（或清除选择），我需要显示一个特殊字符串“未选择值”。

我想使用placeholder 属性，可以在documentation 中看到。

<h4>Basic mat-select</h4>
<mat-form-field>
  <mat-label>Favorite food</mat-label>
  <mat-select placeholder="No value selected">  <!-- this is not showing-->
    <mat-option *ngFor="let food of foods" [value]="food.value">
      {{food.viewValue}}
    </mat-option>
  </mat-select>
</mat-form-field>

但是，如果我应用该属性，占位符会被标签覆盖，这是我不希望的。

Stackblitz 示例：https://stackblitz.com/edit/angular-qlpnim-vyfruq

我试图用属性绑定替换它，但没有运气。我仍然需要<mat-label>，因此它可以在视觉上与表单中的其他表单字段相似。

Answer 1

你可以在MatFormField上使用floatLabel=always

<mat-form-field floatLabel="always">
  <mat-label>Favorite food</mat-label>
  <mat-select placeholder="test placeholder">  <!-- this is not showing-->
    <mat-option *ngFor="let food of foods" [value]="food.value">
      {{food.viewValue}}
    </mat-option>
  </mat-select>
</mat-form-field>

stackblitz