syncfusion-angular-listview

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Implementing Syncfusion Angular ListView

Syncfusion Angular ListView组件实现指南

The Syncfusion Angular ListView component is a feature-rich, interactive component for displaying data in list format. It provides built-in support for data binding, grouping, nested lists, custom templates, selection modes, drag-and-drop, virtualization for large datasets, and comprehensive accessibility features. The component is production-ready and suitable for creating modern, data-driven user interfaces.

Syncfusion Angular ListView组件是一款功能丰富的交互式组件，用于以列表格式展示数据。它内置支持数据绑定、分组、嵌套列表、自定义模板、选择模式、拖拽、大数据集虚拟化以及全面的可访问性功能。该组件可直接投入生产环境，适用于构建现代化的、数据驱动的用户界面。

When to Use This Skill

何时使用本技能

Use this skill when:

Building interactive list-based interfaces with Angular
Displaying data from local or remote sources
Creating grouped or nested list structures
Customizing list item appearance with templates
Handling item selection and user interactions
Implementing specialized patterns (chat windows, checklists, dual-lists)
Optimizing performance with virtualization for large datasets
Building accessible list interfaces

在以下场景中使用本技能：

基于Angular构建交互式列表界面
展示本地或远程数据源的数据
创建分组或嵌套列表结构
使用模板自定义列表项外观
处理项选择和用户交互
实现特殊模式（聊天窗口、复选列表、双列表）
通过虚拟化优化大数据集的性能
构建可访问的列表界面

Component Overview

组件概述

Package:

@syncfusion/ej2-angular-lists

Key Capabilities:

✅ Local and remote data binding (arrays, DataManager, OData, REST APIs)
✅ Grouping and nested list hierarchies
✅ Flexible item, header, and group templates
✅ Single/multiple selection modes with checkboxes
✅ Full event system (select, click, delete, add, remove)
✅ Drag-and-drop for item reordering
✅ Virtualization for large datasets (1000+ items)
✅ AJAX content loading and dynamic templates
✅ Integrated paging support
✅ Comprehensive theming and styling options
✅ WCAG accessibility compliance

包：

@syncfusion/ej2-angular-lists

核心功能：

✅ 本地和远程数据绑定（数组、DataManager、OData、REST API）
✅ 分组和嵌套列表层级
✅ 灵活的项、页眉和组模板
✅ 带复选框的单/多选模式
✅ 完整的事件系统（select、click、delete、add、remove）
✅ 用于项重新排序的拖拽功能
✅ 大数据集（1000+项）虚拟化
✅ AJAX内容加载和动态模板
✅ 集成分页支持
✅ 全面的主题和样式选项
✅ 符合WCAG可访问性标准

Documentation and Navigation Guide

文档与导航指南

Getting Started

入门指南

📄 Read: references/getting-started.md

Angular CLI setup and project configuration
Installing @syncfusion/ej2-angular-lists package
Adding CSS themes and styles
Creating your first ListView component
Basic data binding with minimal examples
Running the application (ng serve)

📄 阅读： references/getting-started.md

Angular CLI设置和项目配置
安装@syncfusion/ej2-angular-lists包
添加CSS主题和样式
创建首个ListView组件
基础数据绑定的极简示例
运行应用（ng serve）

Data Binding

数据绑定

📄 Read: references/data-binding.md

Binding local data arrays (strings, objects)
Field configuration and data mapping
Remote data binding with DataManager
OData and REST API integration
Dynamic data updates and refresh strategies
Field properties: id, text, isChecked, enabled, tooltip, groupBy

📄 阅读： references/data-binding.md

绑定本地数据数组（字符串、对象）
字段配置和数据映射
使用DataManager进行远程数据绑定
OData和REST API集成
动态数据更新和刷新策略
字段属性：id、text、isChecked、enabled、tooltip、groupBy

Customization and Templates

自定义与模板

📄 Read: references/customization-and-templates.md

Header template customization with buttons and search bars
Item templates with avatars, badges, multi-line layouts
Group header templates with dynamic content
Dynamic templates based on device or screen size
Built-in CSS classes (e-list-template, e-list-wrapper, e-list-avatar, etc.)
Advanced template patterns with data binding

📄 阅读： references/customization-and-templates.md

含按钮和搜索栏的页眉模板自定义
带头像、徽章、多行布局的项模板
含动态内容的组页眉模板
基于设备或屏幕尺寸的动态模板
内置CSS类（e-list-template、e-list-wrapper、e-list-avatar等）
带数据绑定的高级模板模式

Grouping and Nested Lists

分组与嵌套列表

📄 Read: references/grouping-and-nested-lists.md

Grouping items by category with groupBy field
Customizing group headers and templates
Creating nested list structures for hierarchical data
Child data binding and expandable groups
Group header customization with item counts

📄 阅读： references/grouping-and-nested-lists.md

使用groupBy字段按类别分组项
自定义组页眉和模板
为分层数据创建嵌套列表结构
子数据绑定和可展开组
带项计数的组页眉自定义

Selection and Item Management

选择与项管理

📄 Read: references/selection-and-items.md

Selection modes (single, multiple, checkbox)
Getting selected items with getSelectedItems() method
Adding items dynamically with addItem()
Removing items with removeItem()
Event handling (select, actionComplete)
Programmatic selection and deselection

📄 阅读： references/selection-and-items.md

选择模式（单选、多选、复选框）
使用getSelectedItems()方法获取选中项
使用addItem()动态添加项
使用removeItem()移除项
事件处理（select、actionComplete）
程序化选择和取消选择

Advanced Features

高级特性

📄 Read: references/advanced-features.md

Virtualization for high-performance large datasets
Scrolling and scroll position management
Drag-and-drop for item reordering
Filtering and searching list items
Integrating pager component with ListView
Loading states and spinners during data fetch
AJAX content loading into list items

📄 阅读： references/advanced-features.md

高性能大数据集虚拟化
滚动和滚动位置管理
用于项重新排序的拖拽功能
列表项过滤和搜索
集成分页器组件与ListView
数据获取期间的加载状态和加载动画
AJAX内容加载到列表项中

Specialized Use Cases

特殊用例

📄 Read: references/specialized-use-cases.md

Building chat window layouts
Creating checklist interfaces with checkboxes
Building dual-list (transfer list) components
Creating grid-based layouts with ListView
Rendering hyperlinked navigation lists
Customizing with dynamic tags and badges
Mobile contact layout patterns

📄 阅读： references/specialized-use-cases.md

构建聊天窗口布局
创建带复选框的复选列表界面
构建双列表（传输列表）组件
使用ListView创建网格布局
渲染超链接导航列表
自定义动态标签和徽章
移动端联系人布局模式

Styling and Themes

样式与主题

📄 Read: references/styling-and-themes.md

Theme imports (Material3, Bootstrap, Fabric, Tailwind)
CSS class customization and overrides
Custom styling for list items and groups
Responsive design and mobile optimization
Animation settings and transitions
RTL (right-to-left) support
Dark mode theming

📄 阅读： references/styling-and-themes.md

主题导入（Material3、Bootstrap、Fabric、Tailwind）
CSS类自定义和覆盖
列表项和组的自定义样式
响应式设计和移动端优化
动画设置和过渡效果
RTL（从右到左）支持
深色模式主题

Item Count and Group Headers

项计数与组页眉

📄 Read: references/item-count-and-grouping.md

Displaying item count in group headers
Dynamic count calculation and updates
Group statistics and aggregations
Advanced group header templates
Conditional item count display

📄 阅读： references/item-count-and-grouping.md

在组页眉中显示项计数
动态计数计算和更新
组统计和聚合
高级组页眉模板
条件项计数显示

Accessibility

可访问性

📄 Read: references/accessibility.md

WCAG 2.1 compliance and keyboard navigation
ARIA attributes and screen reader support
Focus management and indicators
Keyboard shortcuts and navigation patterns
Color contrast and accessible theming
Testing accessibility with assistive technologies

📄 阅读： references/accessibility.md

符合WCAG 2.1标准和键盘导航
ARIA属性和屏幕阅读器支持
焦点管理和指示器
键盘快捷键和导航模式
颜色对比度和可访问主题
使用辅助技术测试可访问性

Complete API Reference

完整API参考

📄 Read: references/api-reference.md

Properties: animation, enablePersistence, enableRtl, locale, query, and more
Methods: back(), checkAllItems(), selectMultipleItems(), and complete method suite
Events: select, scroll, actionBegin, actionComplete, actionFailure with argument details
Complete working examples for each API
Quick reference tables for properties, methods, and events

📄 阅读： references/api-reference.md

属性：animation、enablePersistence、enableRtl、locale、query等
方法：back()、checkAllItems()、selectMultipleItems()及完整方法集
事件：select、scroll、actionBegin、actionComplete、actionFailure及参数详情
每个API的完整工作示例
属性、方法和事件的快速参考表

Quick Start Example

快速入门示例

typescript

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 Import (in styles.css):

css

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

Run:

bash

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

typescript

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中）：

css

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

运行：

bash

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

Common Patterns

常见模式

Pattern 1: Data-Driven List with Field Mapping

模式1：带字段映射的数据驱动列表

Use when displaying complex objects with multiple properties:

typescript

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

当展示含多个属性的复杂对象时使用：

typescript

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

Pattern 2: Grouped List

模式2：分组列表

Use when organizing items by category:

typescript

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

当按类别组织项时使用：

typescript

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

Pattern 3: Templated List

模式3：模板化列表

Use when you need custom layouts:

html

<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>

当需要自定义布局时使用：

html

<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>

Pattern 4: Selection with Checkboxes

模式4：带复选框的选择

Use when users need to select multiple items:

html

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

当用户需要选择多个项时使用：

html

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

Pattern 5: Dynamic Add/Remove

模式5：动态添加/移除

Use for interactive list management:

typescript

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

用于交互式列表管理：

typescript

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

Key Props and Configuration

核心属性与配置

Property	Type	Description
`dataSource`	array/DataManager	The data to display in the list
`fields`	object	Field mappings (text, id, groupBy, etc.)
`template`	string/function	Custom template for list items
`headerTemplate`	string/function	Custom header template
`groupTemplate`	string/function	Custom group header template
`showCheckBox`	boolean	Show checkboxes for selection (default: false)
`showHeader`	boolean	Display ListView header (default: false)
`headerTitle`	string	Title for the header
`enableVirtualization`	boolean	Enable virtual scrolling for large datasets
`enableHtmlSanitizer`	boolean	Sanitize HTML content (default: true)
`allowDragAndDrop`	boolean	Enable drag-and-drop reordering
`select`	event	Triggered when item is selected
`actionComplete`	event	Triggered after add/remove operations

属性	类型	描述
`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	添加/移除操作完成后触发

Common Use Cases

常见用例

Task Manager - Dynamic add/remove with checkboxes and drag-drop
Contact Directory - Multi-line templates with grouping by department
Chat Interface - Custom templates with avatars and timestamps
Product Catalog - Virtualization for thousands of products
Navigation Menu - Nested lists with icons and routing
Checklist - Checkbox selection with count in headers
Dual-List Transfer - Two ListViews with move operations
Mobile Navigation - Touch-friendly, responsive list layout

任务管理器 - 带复选框和拖拽功能的动态添加/移除
联系人目录 - 按部门分组的多行模板
聊天界面 - 带头像和时间戳的自定义模板
产品目录 - 支持数千种产品的虚拟化
导航菜单 - 带图标和路由的嵌套列表
复选列表 - 页眉中显示计数的复选框选择
双列表传输 - 两个ListView带移动操作
移动端导航 - 触控友好的响应式列表布局

Next Steps

下一步

Start here: Getting Started
Bind data: Data Binding
Build interactive: Selection and Items
Optimize performance: Advanced Features
Advanced patterns: Specialized Use Cases

For API reference and detailed documentation, see the Syncfusion Angular ListView API.

从这里开始： 入门指南
绑定数据： 数据绑定
构建交互式界面： 选择与项管理
优化性能： 高级特性
高级模式： 特殊用例

如需API参考和详细文档，请查看Syncfusion Angular ListView API。