Angular中ng-select选中元素的显示控制方案咨询

实现思路 #

ng-select没有内置的限制选中项显示数量的属性，我们可以通过**自定义标签模板（ng-tag-tmp）**控制显示内容，同时配合hover提示展示完整选中列表，避免UI被占满。

具体实现步骤 #

1. 修改ng-select模板，添加自定义显示逻辑 #

在原有ng-select组件内部，新增自定义标签模板和多选中后缀模板，替换默认的选中项展示：

<ng-select [items]="advertisersDv" class="custom" id="AdDv"
           bindLabel="advertiserName"
           [compareWith]="compareFn"
           [multiple]="true"
           [virtualScroll]="true"
           [closeOnSelect]="false"
           groupBy="partnerName"
           [readonly]="!hasPermission([{moduleAccess:ModuleAccess.ADVERTISER_MANAGEMENT,accessLevel:AccessLevel.UPDATE}])"
           (clear)="clearAll('dvAdvertisers')"
           (change)="isCheckedAllDv();selectionchange($event,'dvAdvertisers')"
           (open)="isCheckedAllDv()"
           formControlName="dvAdvertisers">
  <!-- 全选头部模板 -->
  <ng-template ng-header-tmp>
    <label>
      <input type="checkbox" class="form-check-input" [checked]="isCheckedAllDvAdvertisers"
             (change)="toggleSelectAllDv($event)">
      <span class="fw-bold ps-2 fs-6">All</span>
    </label>
  </ng-template>

  <!-- 自定义选中项容器的后缀模板，控制显示逻辑 -->
  <ng-template ng-multi-label-tmp let-items="items">
    <div class="ng-value-container">
      <!-- 只渲染前3个选中项，可按需修改数量 -->
      <ng-container *ngFor="let item of items; let i = index">
        <ng-container *ngIf="i < 3">
          <span class="ng-value">
            <span class="ng-value-label">{{ item.advertiserName }}</span>
            <span class="ng-value-icon right" (click)="removeSelectedItem(item)">×</span>
          </span>
        </ng-container>
      </ng-container>
      <!-- 选中项超过3个时，显示剩余数量+hover提示 -->
      <span *ngIf="items.length > 3" class="ng-value ng-value-multi"
            [title]="getAllSelectedNames(items)">
        +{{ items.length - 3 }} 个更多
      </span>
    </div>
  </ng-template>
</ng-select>

2. 在组件类中添加辅助方法 #

在对应组件的.ts文件中，实现移除选中项和生成提示文本的方法：

// 移除单个选中项
removeSelectedItem(item: any) {
  const dvControl = this.yourFormGroup.get('dvAdvertisers'); // 替换为你的表单组实例
  if (dvControl) {
    const currentSelected = dvControl.value || [];
    dvControl.setValue(currentSelected.filter((selected: any) => !this.compareFn(selected, item)));
  }
}

// 生成所有选中项的名称文本，用于hover提示
getAllSelectedNames(items: any[]): string {
  return items.map(item => item.advertiserName).join('\n');
}

3. 可选样式优化 #

如果需要调整选中项的布局或提示样式，添加自定义CSS：

.ng-value-multi {
  background-color: #f8f9fa;
  cursor: help;
}

.ng-value-container {
  flex-wrap: wrap;
  gap: 4px;
}

关键说明 #

• 示例中限制显示前3个选中项，可直接修改i < 3中的数字调整显示数量。
• 使用原生[title]属性实现hover提示，若需要更美观的弹窗，可结合Angular Material的MatTooltip组件（需提前引入Material模块）。
• 原有全选功能不受影响，全选后会自动显示剩余数量提示，hover可查看完整选中列表。

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