html - 如何始终在 mat-select 中独立于当前选择显示占位符

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>

当前的行为是:选择语言后，占位符变小，移动到顶部，所选语言显示为大。

What I want to have: When a language is selected, still the placeholder should be displayed in big size, the selected language should not be shown.

我怎样才能做到这一点？

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>