Angular中为ng-select多选组件选中值应用自定义Tags样式

步骤1：绑定选中值并处理数据转换 #

在组件TS文件中添加选中值变量，同时实现选中ID到城市对象的转换逻辑，保证Tags组件能拿到需要的显示数据：

selectedCityIds: number[] = [];
cities = [
  { id: 1, name: 'Vilnius' },
  { id: 2, name: 'Kaunas' },
  { id: 3, name: 'Pavilnys' },
  { id: 4, name: 'Pabradė' },
  { id: 5, name: 'Klaipėda' },
];

// 把选中的ID数组转换成对应的城市对象数组
get selectedCities() {
  return this.cities.filter(city => this.selectedCityIds.includes(city.id));
}

// 当Tags组件删除标签时，同步更新ng-select的选中ID
onTagsUpdate(selectedCities: {id: number, name: string}[]) {
  this.selectedCityIds = selectedCities.map(item => item.id);
}

步骤2：修改模板整合组件 #

调整HTML代码，给ng-select绑定选中值、隐藏默认选中标签，同时将转换后的城市对象传给自定义Tags组件，实现双向同步：

<label>Multiselect with custom bindings</label>
<!-- 隐藏ng-select自带的选中标签，避免重复显示 -->
<ng-select 
  [multiple]="true" 
  [(ngModel)]="selectedCityIds"
  hideSelected="true">
  <ng-option *ngFor="let city of cities" [value]="city.id">
    {{city.name}}
  </ng-option>
</ng-select>

<!-- 自定义Tags组件，绑定处理后的城市对象，监听变化同步回ng-select -->
<tags 
  [(ngModel)]="selectedCities"
  (ngModelChange)="onTagsUpdate($event)">
</tags>

可选：调整样式适配布局 #

如果需要让Tags组件完全替代ng-select默认的选中显示区域，可以通过CSS调整布局，比如移除ng-select容器的边框、调整高度：

ng-select .ng-select-container {
  min-height: auto;
  border: none;
}

核心逻辑说明 #

• hideSelected="true"：隐藏ng-select默认的选中标签展示，避免和自定义Tags组件冲突
• selectedCities getter：将ng-select绑定的ID数组转换成完整城市对象，适配Tags组件的数据格式
• ngModelChange事件：确保Tags组件的删除操作能同步更新ng-select的选中值，保持双向数据一致性

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