Angular mat-select选中项公司名前缀重复显示问题

问题核心是mat-select默认会提取mat-option内部所有可见文本作为选中项的显示内容——你添加的前缀字母（比如"Pr"）和公司全称（"PropTech"）会被自动合并，导致选中后出现重复。下面是两种直接有效的解决办法：

方法1：用mat-select-trigger自定义选中项显示 #

通过mat-select-trigger完全接管选中后的展示内容，彻底避免文本自动拼接的问题：

<mat-select [(value)]="selectedCompany">
  <!-- 自定义选中时的显示内容 -->
  <mat-select-trigger>
    {{ selectedCompany }}
  </mat-select-trigger>

  <!-- 选项列表保留前缀+全称的样式 -->
  <mat-option *ngFor="let company of companies" [value]="company">
    <span class="prefix-circle">{{ company.slice(0, 2) }}</span>
    {{ company }}
  </mat-option>
</mat-select>

如果需要选中后也显示前缀+全称，直接在mat-select-trigger里主动拼接即可：

<mat-select-trigger>
  <span class="prefix-circle">{{ selectedCompany?.slice(0, 2) }}</span>
  {{ selectedCompany }}
</mat-select-trigger>

方法2：给前缀元素添加aria-hidden="true" #

让Angular的文本提取逻辑忽略前缀元素，只保留公司全称作为选中项文本：

<mat-select [(value)]="selectedCompany">
  <mat-option *ngFor="let company of companies" [value]="company">
    <!-- 添加aria-hidden="true"让前缀文本不被计入选中项内容 -->
    <span class="prefix-circle" aria-hidden="true">{{ company.slice(0, 2) }}</span>
    {{ company }}
  </mat-option>
</mat-select>

两种方法对比：

• 方法1灵活性更高，适合需要自定义选中项样式的场景；
• 方法2更简洁，仅需修改前缀元素属性，适合不需要调整选中项显示样式的情况。

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