Question

我希望mat-select元素始终显示占位符，即使选择了一个选项。

我的HTML代码：

<mat-select [formControlName]="'language'" placeholder="Language">
    <mat-option value="de">Deutsch</mat-option>
    <mat-option value="en">English</mat-option>
</mat-select>

当前行为是：选择语言后，占位符会变小，移到顶部并显示所选语言。

我想要的是：当选择一种语言时，占位符仍应以大尺寸显示，不应显示所选语言。

我该怎么做？

Answer 1

您可以结合使用floatLabel="never"和mat-select-trigger：

<mat-select [formControlName]="'language'" placeholder="Language" floatlLabel="never">
    <mat-select-trigger>Language</mat-select-trigger>
    <mat-option value="de">Deutsch</mat-option>
    <mat-option value="en">English</mat-option>
</mat-select>

Answer 2

您没有提供label，在这种情况下，“如果未指定，则占位符将用作标签。” （来自documentation）。

要禁用它，请提供一个标签，然后将其隐藏。

<mat-label hidden></mat-label>
<mat-select [formControlName]="'language'" placeholder="Language">
    <mat-option value="de">Deutsch</mat-option>
    <mat-option value="en">English</mat-option>
</mat-select>

如何始终在mat-select中显示占位符，与当前选择

2 个答案: