Angular Material中选中md-option后如何在md-select中显示图标

我之前也碰到过一模一样的问题，Angular Material的md-select默认只会把选项的文本内容显示在选中后的区域，不会自动带上选项里的图标。不过现在有官方支持的靠谱方案，不用再折腾那些临时hack了，给你两种可行的实现方式：

方案一：使用md-select-trigger自定义选中显示（推荐） #

Angular Material专门提供了<md-select-trigger>组件来自定义选中项的展示内容，完美适配你的需求。只需要在md-select内部添加这个触发器模板，把想要展示的图标放进去就行：

<div>
  <md-select placeholder="Icon" [(ngModel)]="actionHook.icon" name="icon">
    <!-- 自定义选中后的显示模板 -->
    <md-select-trigger>
      <i class="material-icons customIcons">{{actionHook.icon}}</i>
      <!-- 如果需要同时显示图标对应的文字，可以加上这行 -->
      <!-- {{actionHook.icon}} -->
    </md-select-trigger>
    
    <md-option *ngFor="let icon of icons" [value]="icon.display">
      <i class="material-icons customIcons">{{icon.display}}</i>
    </md-option>
  </md-select>
</div>

这个方案是官方原生支持的，稳定性和可维护性都很高，选中选项后，触发区域会直接显示对应的图标，完全解决你的问题。

方案二：适配更复杂的图标数据结构 #

如果你的icons数组包含更多属性（比如图标名称和对应文本分开），可以在组件里加一个方法匹配选中的图标对象，再在触发器里调用：

组件代码： #

// 假设你的icons结构示例：
// icons = [{ display: 'home', label: '首页' }, { display: 'settings', label: '设置' }, ...];

getSelectedIcon() {
  return this.icons.find(icon => icon.display === this.actionHook.icon);
}

模板代码： #

<md-select placeholder="Icon" [(ngModel)]="actionHook.icon" name="icon">
  <md-select-trigger>
    <i class="material-icons customIcons">{{getSelectedIcon()?.display}}</i>
    <span>{{getSelectedIcon()?.label}}</span>
  </md-select-trigger>
  
  <md-option *ngFor="let icon of icons" [value]="icon.display">
    <i class="material-icons customIcons">{{icon.display}}</i>
    <span>{{icon.label}}</span>
  </md-option>
</md-select>

这种方式更灵活，能应对更复杂的业务场景。

你提到的那个GitHub issue里的问题，其实已经通过官方提供的md-select-trigger组件解决了，现在不需要再用issue里提到的那些临时hack方法啦。

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