Angular14升18：移除Mat Chip复选标记并保留头像

场景1：保留头像，隐藏复选标记（无空白） #

最可靠的方式是利用Angular Material组件的原生输入属性，直接禁用复选标记的渲染，从根源避免CSS hack带来的布局残留问题：

在mat-chip-option标签上添加[showCheckmark]="false"：

<mat-chip-option #c *ngFor="let country of brand.activeCountries" 
                 (click)="toggleCountrySelection(c, country.id, brand.name, country.country, 'market')" 
                 [selected]="checkMarketCountry(country.id)"
                 [showCheckmark]="false">
  <mat-chip-avatar>
    <img src="https://flagcdn.com/w20/{{country.country.toLowerCase()}}.png" width="20"/>
  </mat-chip-avatar>
  {{ transPrefixCountries + country.country | translate }}
</mat-chip-option>

如果因特殊场景无法使用组件属性，可通过CSS彻底清除复选标记的占位空间：

/* 彻底隐藏复选标记并清除所有布局占位 */
.mdc-evolution-chip__checkmark {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  visibility: hidden !important;
}
/* 修正头像容器的布局间隙 */
.mdc-evolution-chip__graphic {
  gap: 0;
}

场景2：无复选标记且无头像 #

直接移除<mat-chip-avatar>标签，并添加showCheckmark="false"即可：

<mat-chip-option #c *ngFor="let country of brand.activeCountries" 
                 (click)="toggleCountrySelection(c, country.id, brand.name, country.country, 'market')" 
                 [selected]="checkMarketCountry(country.id)"
                 [showCheckmark]="false">
  {{ transPrefixCountries + country.country | translate }}
</mat-chip-option>

原问题原因说明 #

你之前的CSS仅隐藏了复选标记的视觉元素，但该元素原本占据的布局空间（宽度、内边距、flex布局占位）仍未清除，因此会留下空白。使用showCheckmark="false"会让组件完全不渲染复选标记元素，彻底解决残留空间问题。

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