syncfusion-angular-multi-select

用途

Syncfusion Angular MultiSelect Dropdown（组件标签 ejs-multiselect）用于在 Angular 应用中实现多值选择下拉框，允许用户从预定义列表中选取一个或多个值。

主要能力

组件支持四种视觉模式：

Default：选中项以芯片（chip）形式显示在输入框中，适用于标准多选场景。
Box：与 Default 相同，但显式以盒子形式展示，适合需要视觉清晰度的场景。
Delimiter：选中项以逗号分隔文本显示，适合空间受限的布局。
CheckBox：弹出层中每项显示复选框，适合批量选择工作流。

其他能力包括：

数据绑定：支持本地数组（字符串、数字、对象）以及通过 DataManager 绑定远程数据（OData、Web API）。
字段映射：通过 fields 映射 text、value、groupBy、iconCss、disabled。
选择控制：CheckBoxSelection、showSelectAll、maximumSelectionLength、allowCustomValue、disableItem()、addTagOnBlur、changeOnBlur。
过滤：allowFiltering、filtering 事件、updateData()、filterType（startsWith、contains、endsWith）、最小字符阈值、远程过滤、大小写不敏感匹配。
模板：itemTemplate、valueTemplate、groupTemplate、headerTemplate、footerTemplate、noRecordsTemplate、actionFailureTemplate。
分组与级联：fields.groupBy、固定或内联组头、enableGroupCheckBox、父子级联（如国家→州→城市）。
表单集成：模板驱动表单（FormsModule、ngModel、双向绑定）与响应式表单（ReactiveFormsModule、FormGroup、FormControl、formControlName、验证）。
高级特性：虚拟化（enableVirtualization）、弹出层调整大小（allowResize）、列表项图标（iconCss）、本地化（L10n.load()）、无障碍（WAI-ARIA、键盘导航、WCAG 2.2）、RTL 支持。

使用方式

安装：

ng add @syncfusion/ej2-angular-dropdowns

基本用法（Angular 19+ 独立组件）：

import { Component } from '@angular/core';
import { MultiSelectModule } from '@syncfusion/ej2-angular-dropdowns';

@Component({
  standalone: true,
  imports: [MultiSelectModule],
  selector: 'app-root',
  template: `
    <ejs-multiselect
      [dataSource]="skills"
      [fields]="fields"
      placeholder="Select skills"
      [(value)]="selectedSkills"
      (change)="onChange($event)">
    </ejs-multiselect>
  `
})
export class AppComponent {
  public skills = [
    { id: 1, name: 'Angular' },
    { id: 2, name: 'React' },
    { id: 3, name: 'TypeScript' },
    { id: 4, name: 'Node.js' },
  ];
  public fields = { text: 'name', value: 'id' };
  public selectedSkills: number[] = [1, 3];

  onChange(args: any): void {
    console.log('Selected IDs:', args.value);
  }
}

样式导入：

@import '@syncfusion/ej2-base/styles/material3.css';
@import '@syncfusion/ej2-buttons/styles/material3.css';
@import '@syncfusion/ej2-inputs/styles/material3.css';
@import '@syncfusion/ej2-lists/styles/material3.css';
@import '@syncfusion/ej2-popups/styles/material3.css';
@import '@syncfusion/ej2-dropdowns/styles/material3.css';
@import '@syncfusion/ej2-angular-dropdowns/styles/material3.css';

复选框模式与全选：

import { MultiSelectModule, CheckBoxSelectionService } from '@syncfusion/ej2-angular-dropdowns';

@Component({
  standalone: true,
  imports: [MultiSelectModule],
  providers: [CheckBoxSelectionService],
  template: `
    <ejs-multiselect
      [dataSource]="items"
      mode="CheckBox"
      [showSelectAll]="true"
      selectAllText="Select All"
      unSelectAllText="Unselect All"
      [maximumSelectionLength]="5">
    </ejs-multiselect>
  `
})

远程数据过滤：

template: `
  <ejs-multiselect
    [dataSource]="data"
    [allowFiltering]="true"
    filterType="contains"
    (filtering)="onFilter($event)">
  </ejs-multiselect>
`

onFilter(args: FilteringEventArgs): void {
  const query = new Query().where('name', 'contains', args.text, true);
  args.updateData(this.data, query);
}

响应式表单集成：

import { ReactiveFormsModule, FormControl } from '@angular/forms';

public skillsControl = new FormControl([1, 3]);

<ejs-multiselect [formControl]="skillsControl" [dataSource]="skills" [fields]="fields">
</ejs-multiselect>

关键属性

dataSource：any[] | DataManager，要显示的项。
fields：FieldSettingsModel，映射 text、value、groupBy、disabled、iconCss。
value：any[]，当前选中值（使用 [(value)] 实现双向绑定）。
mode：string，Default、Box、Delimiter、CheckBox。
allowFiltering：boolean，启用下拉框内搜索。
filterType：string，startsWith、contains、endsWith。
showSelectAll：boolean，在 CheckBox 模式下显示全选。
maximumSelectionLength：number，限制可选数量。
allowCustomValue：boolean，允许用户添加列表外的值。
enableVirtualization：boolean，优化大列表渲染。
popupHeight / popupWidth：string，约束弹出层尺寸。
allowResize：boolean，允许用户拖动调整弹出层大小。
placeholder：string，输入提示文本。

适用场景

适用于 Angular 应用中需要从列表中选择多个值的表单、筛选器、标签输入、批量选择等界面。支持本地与远程数据、分组、级联、模板定制、虚拟化与无障碍访问。

限制

资料未提供具体的收费、价格、平台兼容性细节或性能指标。部分高级配置（如本地化、RTL、无障碍）的具体实现细节需参考对应参考文档。

技能介绍

用途

主要能力

使用方式

关键属性

适用场景

限制