Angular 17迁移后自动生成<mat-pseudo-checkbox>的移除方法咨询

方法1：通过组件配置隐藏 #

Angular Material的多选下拉组件（mat-select搭配multiple属性）在Angular 17中默认启用伪复选框，可通过以下配置移除：

• 在mat-select上添加disableOptionCentering属性，避免默认布局偏移
• 自定义mat-option内容模板，不包含伪复选框结构：

<mat-select multiple disableOptionCentering>
  <mat-option *ngFor="let option of options" [value]="option.value">
    {{ option.label }}
  </mat-option>
</mat-select>

方法2：强制覆盖样式（解决display:none不生效问题） #

由于Angular Material的视图封装机制，直接设置样式会被覆盖，需使用穿透性样式：

• 在组件CSS/SCSS中用:host ::ng-deep强制覆盖：

:host ::ng-deep .mat-pseudo-checkbox {
  display: none !important;
}

• 若在全局样式文件（如styles.scss）中，可直接编写：

.mat-pseudo-checkbox {
  display: none !important;
}

方法3：切换为单选下拉（非多选场景） #

如果下拉是单选需求，移除mat-select上的multiple属性，伪复选框会自动隐藏——它仅在多选模式下默认显示。

内容的提问来源于stack exchange，提问作者Vijay G Rama