如何让mat-select始终显示占位符，选中选项时不展示选中内容？

嘿，这个需求我之前也碰到过，有两种靠谱的实现方式，分别适合不同场景，你可以根据自己的情况选：

方法一：自定义触发器（推荐，官方原生方案） #

Angular Material提供了mat-select-trigger组件，允许你完全自定义下拉选择器按钮的显示内容。我们可以利用它固定显示占位符文本，不管选中哪个选项都不变：

<mat-select 
  [formControlName]="'language'" 
  placeholder="Language"
>
  <!-- 自定义触发器内容，始终显示占位符 -->
  <mat-select-trigger>
    Language
  </mat-select-trigger>
  
  <mat-option value="de">Deutsch</mat-option>
  <mat-option value="en">English</mat-option>
</mat-select>

如果你的占位符是动态变量（比如从国际化配置里获取），直接换成变量即可：

<mat-select-trigger>
  {{ placeholderText }}
</mat-select-trigger>

这种方式的好处是完全符合Material的设计规范，不会因为版本更新导致样式失效，而且代码简洁易维护。

方法二：CSS覆盖默认样式（适合快速临时场景） #

如果你不想修改模板结构，也可以通过CSS强制隐藏选中的选项文本，并固定占位符的样式。首先给mat-select加一个自定义类，避免影响其他组件：

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

然后添加CSS样式（如果是组件内样式，需要加上::ng-deep来穿透组件封装；如果是全局样式可以直接写）：

/* 隐藏选中后的选项文本 */
::ng-deep .persistent-placeholder .mat-select-value {
  display: none !important;
}

/* 空状态时恢复显示（可选，空的时候本来就显示占位符） */
::ng-deep .persistent-placeholder.mat-select-empty .mat-select-value {
  display: block !important;
}

/* 强制占位符保持初始样式，不浮动变小 */
::ng-deep .persistent-placeholder .mat-select-placeholder {
  transform: none !important;
  position: static !important;
  opacity: 1 !important;
}

/* 聚焦状态下也保持占位符样式 */
::ng-deep .persistent-placeholder.mat-select-focused .mat-select-placeholder {
  transform: none !important;
  opacity: 1 !important;
}

这种方式属于样式 hack，虽然能快速生效，但如果Angular Material的内部类名更新，可能需要调整样式，所以更适合临时需求或者小项目。

内容的提问来源于stack exchange，提问作者Codev