Angular Material 15中如何隐藏Chips？迁移14至15后无法隐藏

问题说明 #

从Angular Material 14迁移到15版本后，Chips组件无法实现完全隐藏的效果：

• 14版本中可以正常呈现隐藏状态
• 15版本中仅通过设置background-color: transparent只能改变颜色，无法完全移除Chips的可见残留

当前使用的无效CSS：

.mat-mdc-standard-chip { background-color: transparent !important; }

解决思路及方案 #

Angular Material 15切换到了MDC（Material Design Components）作为底层实现，Chips的DOM结构、样式逻辑和14版本差异较大，仅修改背景色无法覆盖所有视觉元素。推荐以下几种方案：

方案1：直接隐藏元素 #

通过display: none彻底隐藏Chips（不会保留占位空间），或用visibility: hidden隐藏但保留占位，根据业务需求选择：

.mat-mdc-standard-chip {
  display: none !important;
  /* 若需保留占位，替换为：visibility: hidden !important; */
}

方案2：清除所有MDC相关视觉样式 #

针对15版本Chips的MDC结构，移除边框、阴影及伪元素：

.mat-mdc-standard-chip {
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}
.mat-mdc-standard-chip::before,
.mat-mdc-standard-chip::after {
  display: none !important;
}

方案3：模板层面条件渲染 #

这是更符合Angular开发规范的方式，直接通过*ngIf控制Chips的渲染，从根源上避免显示问题：

<mat-chip *ngIf="isChipsVisible">你的Chips内容</mat-chip>

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