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

Question

如果用户未在 .txt 文件中选择值（或清除选择），我需要显示特殊字符串“未选择任何值” mat-select。

我想使用该属性，如文档placeholder中所示。

<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

您可以floatLabel=always使用MatFormField

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

堆栈闪电战