ng-select 分组功能深度探索：可选中与隐藏分组的完整实现

【免费下载链接】ng-select :star: Native angular select component 项目地址: https://gitcode.com/gh_mirrors/ng/ng-select

ng-select 作为 Angular 生态系统中功能最强大的下拉选择组件之一，其分组功能为开发者提供了优雅的数据组织方式。本文将深入解析 ng-select 的分组机制，特别是可选中分组与隐藏分组这两个高级功能，帮助您构建更专业、更高效的用户界面。

为什么需要分组功能？

在处理大量数据时，合理的分组能显著提升用户体验。想象一下，您有一个包含数百个国家的下拉列表，如果按大洲分组，用户就能快速定位到目标选项。ng-select 的分组功能正是为此而生，它让复杂数据的展示变得井然有序。

基础分组配置

ng-select 的分组功能通过 groupBy 属性实现，这是最基础的分组方式：

// 示例数据
accounts = [
  { name: 'Adam', country: 'United States' },
  { name: 'Amalie', country: 'Argentina' },
  { name: 'Nicole', country: 'Colombia' }
];

// 模板中使用
<ng-select
  [items]="accounts"
  bindLabel="name"
  groupBy="country">
</ng-select>

在这个示例中，选项将按照国家字段自动分组，每个国家成为一个独立的组别。

可选中分组：selectableGroup 的强大功能

ng-select 的真正强大之处在于其可选中分组功能。通过设置 [selectableGroup]="true"，您可以让分组标题本身成为可选中的选项。

基本用法

<ng-select
  [items]="accounts"
  bindLabel="name"
  groupBy="country"
  [multiple]="true"
  [selectableGroup]="true"
  [(ngModel)]="selectedAccount">
</ng-select>

当用户点击分组标题时，整个分组会被选中。这在批量操作场景中特别有用，比如"全选北美地区所有用户"。

分组模型控制：selectableGroupAsModel

ng-select 提供了精细的分组模型控制选项。默认情况下，当 selectableGroupAsModel 为 true 时，选中分组会将分组本身作为模型值：

<!-- 分组本身作为模型值（默认行为） -->
<ng-select
  [selectableGroup]="true"
  [selectableGroupAsModel]="true">
</ng-select>

当设置为 false 时，选中分组会选中组内的所有子项，但分组本身不会出现在模型值中：

<!-- 只选中子项，不包含分组 -->
<ng-select
  [selectableGroup]="true"
  [selectableGroupAsModel]="false">
</ng-select>

这种灵活性让您可以根据业务需求选择最合适的数据结构。

隐藏分组：hideSelected 的巧妙应用

隐藏分组是 ng-select 的另一个实用功能，通过结合 [hideSelected]="true" 和 [selectableGroup]="true" 实现：

<ng-select
  [items]="accounts"
  bindLabel="name"
  groupBy="country"
  [multiple]="true"
  [hideSelected]="true"
  [selectableGroup]="true"
  [(ngModel)]="selectedAccounts">
</ng-select>

当用户选中一个分组时，该分组的所有子项会从下拉列表中隐藏。这在创建"已选项目"列表时非常有用，可以避免用户重复选择。

自定义分组模板

ng-select 允许您完全自定义分组的显示方式。使用 ng-optgroup-tmp 模板，您可以创建更丰富的分组标题：

<ng-select
  [items]="accounts"
  bindLabel="name"
  groupBy="country"
  [selectableGroup]="true">
  <ng-template ng-optgroup-tmp let-item="item">
    <div class="custom-group">
      <span class="flag-icon flag-icon-{{item.country?.toLowerCase()}}"></span>
      <strong>{{ item.country || '未分组' }}</strong>
      <small class="count">({{ item.children?.length }} 个项目)</small>
    </div>
  </ng-template>
</ng-select>

分组功能的内部实现机制

ng-select 的分组功能在 items-list.ts 中实现核心逻辑。当检测到 groupBy 属性时，系统会自动将数据转换为分层的结构：

1. 分组创建：根据 groupBy 指定的字段对数据进行分组
2. 分组项生成：为每个分组创建父级选项，设置 disabled: !this._ngSelect.selectableGroup()
3. 层级关系建立：建立父子选项之间的引用关系

选择逻辑在 selection-model.ts 中处理，实现了复杂的分组选择状态管理：

// 选中分组时的逻辑
if (item.children) {
  this._setChildrenSelectedState(item.children, true);
  this._removeChildren(item);
  if (groupAsModel && this._activeChildren(item)) {
    this._selected = [...this._selected.filter((x) => x.parent !== item), item];
  }
}

实际应用场景

场景一：地区选择器

// 数据按大洲分组
regions = [
  { name: '北京', category: '华北' },
  { name: '上海', category: '华东' },
  { name: '广州', category: '华南' }
];

// 用户可以选择整个大洲或单个城市

场景二：权限管理系统

// 功能权限分组
permissions = [
  { name: '读取用户', category: '用户管理' },
  { name: '创建用户', category: '用户管理' },
  { name: '查看报表', category: '报表管理' }
];

// 管理员可以一键选择整个功能模块

场景三：商品分类选择

// 商品按分类组织
products = [
  { name: 'iPhone 15', category: '手机' },
  { name: 'MacBook Pro', category: '电脑' },
  { name: 'AirPods', category: '配件' }
];

// 批量选择同一分类的所有商品

性能优化建议

1. 虚拟滚动支持：对于大量分组的场景，启用 [virtualScroll]="true" 可以显著提升性能
2. 延迟加载：考虑使用分页或无限滚动来处理超大数据集
3. 最小化监控：避免在分组模板中使用复杂的表达式，减少变更检测的开销

常见问题与解决方案

Q: 分组标题无法点击？

A: 确保设置了 [selectableGroup]="true"，默认情况下分组是不可点击的。

Q: 选中分组后模型值不符合预期？

A: 检查 selectableGroupAsModel 的设置，它控制分组是否作为模型值的一部分。

Q: 分组显示异常？

A: 确认 groupBy 指定的字段在所有数据中都存在，缺失该字段的数据会被归入"未分组"类别。

结语

ng-select 的分组功能为复杂数据的选择提供了优雅的解决方案。通过合理使用可选中分组和隐藏分组，您可以创建出既美观又高效的用户界面。无论是简单的分类展示，还是复杂的批量操作，ng-select 都能提供强大的支持。

记住，好的用户体验往往隐藏在细节之中。ng-select 的分组功能正是这样一个细节，它能让您的应用在众多竞争对手中脱颖而出。

要了解更多实现细节，可以查看 ng-select.component.ts 中的相关输入属性定义，以及 group-selectable-example.component.html 中的完整示例代码。

【免费下载链接】ng-select :star: Native angular select component 项目地址: https://gitcode.com/gh_mirrors/ng/ng-select