Angular 4中如何为ng-select选中项设置FontAwesome复选框背景图标

没问题，我来帮你搞定这个需求！其实ng-select本身支持自定义选项模板，结合FontAwesome的图标就能轻松实现选中项显示复选标记的效果，下面是具体步骤：

1. 确认FontAwesome已正确引入 #

首先确保你的项目里已经引入了FontAwesome，比如通过npm安装后在angular.json的styles数组里添加FontAwesome的样式文件，或者直接在index.html里引入CDN链接（如果还没弄的话，这一步得先搞定）。

2. 修改HTML模板，自定义选项显示 #

你需要用ng-select的选项模板指令来自定义每个下拉项的显示逻辑，判断当前选项是否被选中，然后决定是否渲染复选图标。把原来的ng-select代码改成下面这样：

<ng-select class="box" placeholder="{{selected}}" [options]="company" [(ngModel)]="selected">
  <!-- 自定义下拉选项模板 -->
  <ng-template ng-option-tmp let-item="item" let-selected="selected">
    <!-- 选中时显示FontAwesome复选图标 -->
    <span *ngIf="selected" class="icon-spacing"><i class="fas fa-check"></i></span>
    <!-- 显示选项文本 -->
    {{ item.label }}
  </ng-template>

  <!-- 可选：如果想让顶部选中的内容也显示复选图标，加上这个模板 -->
  <ng-template ng-selected-item-tmp let-item="item">
    <i class="fas fa-check icon-spacing"></i> {{ item.label }}
  </ng-template>
</ng-select>

代码说明： #

• ng-option-tmp是ng-select提供的自定义下拉选项的模板指令，let-item用来获取当前循环的选项对象，let-selected用来判断该选项是否被选中。
• fas fa-check是FontAwesome的实心复选图标，如果你想用空心的可以换成far fa-check-square之类的，根据你的需求选就行。
• 第二个模板ng-selected-item-tmp是用来自定义顶部选中后显示的内容，不需要的话可以删掉。

3. 调整SCSS样式，优化显示效果 #

你原来的SCSS类名可能不太对，ng-select的下拉面板和选项有自己的默认类名，我帮你修正并添加图标间距的样式：

.box {
  // 下拉面板中选中项的样式
  .ng-dropdown-panel .ng-option.selected {
    color: #82ffe4 !important;
    background-color: #4389a9 !important;
    font-size: 14px;
    font-family: MontserratRegular;
  }

  // 给图标加间距，让文字和图标更协调
  .icon-spacing {
    margin-right: 8px;
  }
}

注意事项 #

• 确保你的company数组里的选项对象有label属性（比如{label: 'XX公司', value: 'xx'}），如果你的字段名不是label，记得把模板里的item.label改成你实际的字段名，比如item.name。
• 如果你的FontAwesome用的是Pro版本，图标类名可能会有差异，根据实际情况调整就行。

这样设置之后，下拉列表里被选中的项就会自动显示FontAwesome的复选图标啦！

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