Angular Material多选框单个选项功能的文本显示异常问题求助

你好呀！看起来你遇到的问题根源在于：Angular Material的<mat-option>默认会把它内部的所有内容（包括你加的"Only"按钮文本）都当成选项的显示标签，所以选中后这部分按钮文本会被一起渲染到多选框的显示区域里，才出现了额外的"Only"字样。

给你推荐一个标准且好用的解决办法，用Angular Material提供的displayWith属性自定义选中项的显示内容：

步骤1：在组件类中定义显示函数 #

在你的组件.ts文件里添加一个函数，专门用来返回你想要显示的选中项文本：

displaySelectedVersion(version: number): string {
  // 只返回版本号，完全忽略按钮相关的内容
  return version.toString();
}

步骤2：在模板中配置displayWith #

把这个函数绑定到<mat-select>的displayWith属性上，同时我也顺手帮你修正了模板里*ngFor的语法小问题（少了闭合引号）：

<mat-select 
  [formControl]="selectionControl" 
  (selectionChange)="selectionChange($event.value)" 
  multiple
  [displayWith]="displaySelectedVersion"
>
  <mat-option class="position-relative options-wrapper"
    *ngFor="let version of [1,2,3,4,5,6,7,8,9,10]" 
    [value]="version">
    <span>{{version}}</span>
    <button mat-button class="position-absolute only-btn" style="top:5px; right: 0px;">Only</button>
  </mat-option>
</mat-select>

额外优化（可选） #

为了更好的无障碍体验，你可以给按钮加上aria-hidden="true"属性，让屏幕阅读器忽略这个按钮文本：

<button mat-button class="position-absolute only-btn" style="top:5px; right: 0px;" aria-hidden="true">Only</button>

这样配置后，多选框就只会显示选中的版本号，不会再把"Only"文本带进去啦~

备注：内容来源于stack exchange，提问作者Venkatesh Prasad