Angular 2项目中如何在Angular Material的<mat-select>选中值添加图片？

嘿，我之前刚好处理过一模一样的需求，Angular Material的mat-select其实提供了专门的自定义选中内容的方式——mat-select-trigger，用它就能轻松把静态图片加到选中值里啦！

核心思路 #

mat-select-trigger是<mat-select>的内置指令，专门用来定制选中后的显示模板，默认它会展示选项的文本，但我们可以在里面放任意HTML元素，包括<img>标签。

完整代码示例 #

组件模板（HTML）

<mat-select [(value)]="selectedOption">
  <!-- 自定义选中后的显示内容 -->
  <mat-select-trigger>
    <div class="selected-item">
      <img [src]="selectedOption?.iconUrl" alt="{{selectedOption?.label}}" class="option-icon">
      <span>{{selectedOption?.label}}</span>
    </div>
  </mat-select-trigger>

  <!-- 下拉选项列表 -->
  <mat-option *ngFor="let option of options" [value]="option">
    <div class="option-item">
      <img [src]="option.iconUrl" alt="{{option.label}}" class="option-icon">
      <span>{{option.label}}</span>
    </div>
  </mat-option>
</mat-select>

组件类（TypeScript）

import { Component } from '@angular/core';

interface SelectOption {
  label: string;
  iconUrl: string;
  // 可按需添加其他属性
}

@Component({
  selector: 'app-select-with-icon',
  templateUrl: './select-with-icon.component.html',
  styleUrls: ['./select-with-icon.component.css']
})
export class SelectWithIconComponent {
  selectedOption: SelectOption | undefined;
  options: SelectOption[] = [
    { label: '选项1', iconUrl: '/assets/icons/icon1.png' },
    { label: '选项2', iconUrl: '/assets/icons/icon2.png' },
    { label: '选项3', iconUrl: '/assets/icons/icon3.png' }
  ];
}

样式（CSS）

.selected-item, .option-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.option-icon {
  width: 20px;
  height: 20px;
  object-fit: contain;
}

关键说明 #

• mat-select-trigger内部的内容就是选中后会显示在选择框里的内容，这里我们用<div>把图片和文本放在一起，实现图文结合的效果。
• 下拉选项里的内容可以和选中后的保持一致，让用户体验更统一。
• 如果你的图片是固定的（不是每个选项对应不同图片），直接把<img>的src写死就行，比如：

<mat-select-trigger>
  <img src="/assets/icons/fixed-icon.png" alt="固定图标" class="option-icon">
  <span>{{selectedOption?.label}}</span>
</mat-select-trigger>

这样就能完美实现你想要的效果啦！

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