Angular 14升级至15后mat-pseudo-checkbox无法显示的解决咨询

• 检查组件导入配置
  Angular 15对Material组件的导入逻辑做了调整，务必确保在对应模块或独立组件的imports数组中显式导入MatPseudoCheckboxModule，避免依赖全局导入的遗留配置：

import { MatPseudoCheckboxModule } from '@angular/material/core';

@NgModule({
  imports: [
    // 其他业务模块
    MatPseudoCheckboxModule
  ]
})

• 确认样式依赖加载
  mat-pseudo-checkbox属于Material核心模块组件，需要确保全局样式配置正确：

  1. 检查angular.json的styles节点，确认包含Material预构建主题：

  "styles": [
    "@angular/material/prebuilt-themes/indigo-pink.css",
    "src/styles.scss"
  ]
  

  2. 若使用自定义主题，需在主题文件中引入core模块的样式混合器：

  @use '@angular/material' as mat;
  
  @include mat.core();
  // 其他主题配置代码
  

• 校验状态绑定值的合法性
  确保isItemSelected()方法返回的是组件支持的状态字符串：'checked'、'unchecked'或'indeterminate'，如果原逻辑返回布尔值，需要做转换：

isItemSelected(): 'checked' | 'unchecked' | 'indeterminate' {
  return this.selectedItem ? 'checked' : 'unchecked';
}

• 替代方案（上述方法无效时）
  如果仍无法解决，可使用mat-checkbox配合appearance="none"属性模拟伪复选框效果，既保留原有交互逻辑，又兼容Angular 15：

<div>
  <mat-checkbox (click)="itemSelect()" [checked]="isItemSelected()" appearance="none"></mat-checkbox>
  Test
</div>

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