界面控件Kendo UI for Angular中文教程：如何构建带图表的仪表板？（三）

Kendo UI for Angular ListView可以轻松地为客户端设置一个带有图表列表的仪表板，包括分页、按钮选项、数字或滚动，以及在没有更多项目要显示时的通知等。Kendo UI for Angular是专用于Angular开发的专业级Angular组件。telerik致力于提供纯粹的高性能Angular UI组件，无需任何jQuery依赖关系。

在上文中（点击这里回顾>>），我们为大家介绍了如何使用@for显示图表、使用@for自定义分页、更新App组件等，本文将介绍该系列教程的最后一个篇章——Kendo UI for Angular ListView，欢迎持续关注我们获取更多产品教程！

Kendo UI for Angular 2024 Q4新版下载

Telerik_KendoUI产品技术交流群：726377843 欢迎一起进群讨论

Kendo UI for Angular ListView

Kendo UI for Angular ListView允许我们在一个高度可定制的列表中显示一组项目，它被设计用来处理复杂的数据集，并为我们需要的功能提供内置支持，比如：

分页：通过将大型数据集拆分为多个页面，可以轻松地管理它们。
滚动：实现平滑滚动和虚拟化，以有效地呈现大列表。
项目模板：使用模板自定义列表中每个项目的显示方式。

此外使用Kendo UI for Angular ListView带来了内置的分页、滚动和项目呈现功能，减少了对分页、服务、类型等自定义实现的需求。

让我们利用所有这些特性，跳转到Kendo UI for Angular ListView。

切换到Kendo UI for Angular ListView

再次进入项目目录，运行ng add @progress/kendo-angular-listview schematics命令，添加Kendo UI ListView：

ng add @progress/kendo-angular-listview
✔ Determining Package Manager
› Using package manager: npm
✔ Searching for compatible package version
› Found compatible package version: @progress/kendo-angular-listview@16.4.0.
✔ Loading package information from registry
✔ Confirming installation
✔ Installing package
@progress/kendo-theme-default already installed, skipping styles registration.
UPDATE package.json (1888 bytes)
✔ Packages installed successfully.

分页

我们不使用paginationService，而是用Kendo UI提供的PagerSettings类型替换PaginationResult。这个配置让您可以轻松地控制分页设置，因为同一个Angular ListView可以处理所有的事情——我们不需要服务或额外的变量来保存完整的数据。因此，将frameworkUsage模拟数据分配给country，还添加一些配置PagerSettings。（通过设置previousNext属性来显示previous和next按钮，并在pageSizeValues设置为true的情况下显示项目总数。）

country = frameworkUsage;
public pagerSettings: PagerSettings = {
previousNext: true,
pageSizeValues: true,
};

app.component.ts中的代码如下：

import { Component, } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { frameworkUsage } from './data/data';
import { ChartStatsComponent } from './components/chart-stats/chart-stats.component';
import {
ListViewModule,
PagerSettings,
} from '@progress/kendo-angular-listview';

@Component({
selector: 'app-root',
standalone: true,
imports: [RouterOutlet, ChartStatsComponent, ListViewModule],
templateUrl: './app.component.html',
styleUrl: './app.component.css',
})
export class AppComponent {
country = frameworkUsage;
public pagerSettings: PagerSettings = {
previousNext: true,
pageSizeValues: true,
};
}

将@for替换为kendo-listview

更新app.component.html来使用kendo-listview组件，我们必须绑定一些属性：

[kendoListViewBinding]：它将数据绑定到ListView，接受要显示的项数组。在本例中它绑定到ountry，这是我们的数据列表。
kendoListViewItemTemplate：这是一个Angular模板，用于定义如何呈现ListView中的每个项。它允许您自定义列表项的显示——在我们的例子中，是带有标题和应用程序图表统计的h3。
let-dataItem="dataItem"：这提供了对当前项数据的访问。
let-isLast：这个变量是Kendo ListView模板上下文的一部分，用于确定当前呈现的项是否为列表中的最后一项。我们可以使用这个变量来显示最后一项的特殊消息或样式，例如显示“您已经到达列表的末尾”消息。
[pageable]：这个属性配置ListView的分页设置，以便显示上一页/下一页按钮以及要显示多少个页面按钮。
[pageSize]：指定每页显示多少项。

我们在一个组件中包含了演示的所有内容，只有几行代码。app.component.html中的代码应该是这样的：

<kendo-listview
[height]="550"
[kendoListViewBinding]="country"
[pageable]="pagerSettings"
[pageSize]="pageSize"
>
<ng-template
kendoListViewItemTemplate
let-dataItem="dataItem"
let-isLast="isLast"
>
<h3>{{ dataItem.country }}</h3>
@if (isLast) {
<p>You reach the limit</p>
}
<app-chart-stats
[data]="dataItem.data"
field="framework"
category="usage"
/>
</ng-template>
</kendo-listview>

保存更改。