syncfusion-angular-listview

用途

本技能用于指导在 Angular 项目中实现 Syncfusion Angular ListView 组件。该组件是一个功能丰富、可交互的列表展示组件，适合构建现代、数据驱动的用户界面。当需要构建基于 Angular 的交互式列表界面、展示本地或远程来源数据、创建分组或嵌套列表结构、通过模板自定义列表项外观、处理条目选择与用户交互、实现聊天窗口/清单/双列表等特定模式、借助虚拟化优化大数据集性能，或构建可访问的列表界面时，可以使用本技能。

组件概览

包名：@syncfusion/ej2-angular-lists

主要能力：

本地与远程数据绑定（数组、DataManager、OData、REST API）
分组与嵌套列表层级
灵活的条目、头部与分组模板
单选/多选模式及复选框
完整事件系统（select、click、delete、add、remove）
拖拽排序条目重排
面向大数据集（1000+ 条目）的虚拟化
AJAX 内容加载与动态模板
集成分页支持
主题与样式选项
WCAG 可访问性支持

使用方式

快速开始示例

import { ListViewModule } from '@syncfusion/ej2-angular-lists';
import { Component } from '@angular/core';

@Component({
  imports: [ListViewModule],
  standalone: true,
  selector: 'app-root',
  template: `
    <ejs-listview 
      id='sample-list' 
      [dataSource]='data'>
    </ejs-listview>
  `
})
export class AppComponent {
  // Simple string data
  public data: string[] = [
    'Artwork', 'Abstract', 'Modern Painting', 
    'Ceramics', 'Animation Art', 'Oil Painting'
  ];
}

CSS 导入（在 styles.css 中）：

@import "../node_modules/@syncfusion/ej2-base/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-angular-lists/styles/material3.css";

运行：

npm install @syncfusion/ej2-angular-lists --save
ng serve --open

常见模式

模式 1：带字段映射的数据驱动列表。适用于展示具有多个属性的复杂对象：

public data = [
  { name: 'John', email: 'john@example.com', id: '1' },
  { name: 'Jane', email: 'jane@example.com', id: '2' }
];
public fields = { text: 'name', id: 'id' };

模式 2：分组列表。适用于按类别组织条目：

public fields = { text: 'name', groupBy: 'department' };

模式 3：模板化列表。适用于需要自定义布局时：

<ejs-listview [dataSource]='data' cssClass='e-list-template'>
  <ng-template #template let-data="">
    <div class="e-list-wrapper">
      <span>{{ data.name }}</span>
    </div>
  </ng-template>
</ejs-listview>

模式 4：带复选框的选择。适用于用户需要选择多个条目时：

<ejs-listview [dataSource]='data' [showCheckBox]='true'></ejs-listview>

模式 5：动态添加/删除。适用于交互式列表管理：

addItem() {
  this.listview.addItem([{ text: 'New Item', id: 'new' }]);
}
removeItem(element: HTMLElement) {
  this.listview.removeItem(element);
}

关键属性与配置

dataSource：array/DataManager，列表中展示的数据
fields：object，字段映射（text、id、groupBy 等）
template：string/function，列表项自定义模板
headerTemplate：string/function，自定义头部模板
groupTemplate：string/function，自定义分组头部模板
showCheckBox：boolean，显示用于选择的复选框（默认 false）
showHeader：boolean，显示 ListView 头部（默认 false）
headerTitle：string，头部标题
enableVirtualization：boolean，为大数据集启用虚拟滚动
enableHtmlSanitizer：boolean，清理 HTML 内容（默认 true）
allowDragAndDrop：boolean，启用拖拽排序
select：event，条目被选中时触发
actionComplete：event，添加/删除操作后触发

参考资料导航

技能文档按以下主题组织参考文件：

入门：references/getting-started.md（Angular CLI 设置与项目配置、安装 @syncfusion/ej2-angular-lists 包、添加 CSS 主题与样式、创建第一个 ListView 组件、基础数据绑定示例、运行应用 ng serve）
数据绑定：references/data-binding.md（本地数组、字段配置与数据映射、使用 DataManager 的远程数据绑定、OData 与 REST API 集成、动态数据更新与刷新、字段属性 id、text、isChecked、enabled、tooltip、groupBy）
自定义与模板：references/customization-and-templates.md（头部模板、条目模板、分组头部模板、动态模板、内置 CSS 类等）
分组与嵌套列表：references/grouping-and-nested-lists.md
选择与条目管理：references/selection-and-items.md（选择模式、getSelectedItems()、addItem()、removeItem()、事件处理等）
高级功能：references/advanced-features.md（虚拟化、滚动、拖拽、过滤搜索、分页集成、加载状态、AJAX 内容加载）
特定用例：references/specialized-use-cases.md（聊天窗口、清单、双列表、网格布局、超链接导航列表、动态标签与徽标、移动端联系人布局）
样式与主题：references/styling-and-themes.md（Material3、Bootstrap、Fabric、Tailwind 主题导入、CSS 类覆盖、响应式、动画、RTL、深色模式）
条目计数与分组头部：references/item-count-and-grouping.md
可访问性：references/accessibility.md（WCAG 2.1、键盘导航、ARIA、焦点管理、快捷键、颜色对比）
完整 API 参考：references/api-reference.md（属性、方法、事件及示例、快速参考表）

适用场景

任务管理器：动态增删、复选框、拖拽
联系人目录：多行模板、按部门分组
聊天界面：带头像与时间戳的自定义模板
产品目录：面向数千产品的虚拟化
导航菜单：带图标与路由的嵌套列表
清单：复选框选择、头部计数
双列表转移：两个 ListView 配合移动操作
移动端导航：触控友好、响应式列表布局

限制

技能资料未提供关于授权、收费、价格、平台兼容范围、性能指标或效果承诺的具体信息；以上内容暂未提供，实际使用应以官方文档与项目实际环境验证为准。