UI组件库Kendo UI for Angular入门指南教程： 如何安装和开始使用（二）

使用DropDownList过滤 格

最后，让我们添加一些组件交互。Grid有一个内置的过滤UI，但我们将要使用DropDownList按产品类别过滤Grid，为此需要添加一个valueChange处理程序：

1. 在src/app/app.component.ts中添加handleFilterChange方法：

export class AppComponent {// ...public handleFilterChange(item: {text: string;value: number | null;}): void {this.filterTerm = item.value;this.skip = 0;this.loadGridItems();}}

2. 在src/app/app.component.html中绑定DropDownList的(valueChange)事件：

<kendo-dropdownlist [data]="dropDownItems" textField='text' valueField="value" [defaultItem]="defaultItem" (valueChange)="handleFilterChange($event)"></kendo-dropdownlist>

应用程序源代码

您的 Kendo UI Angular 入门应用程序已完成！

完整的源代码可在kendo-angular-quickstart-cli GitHub 存储库中找到。

激活许可证密钥

Kendo UI for Angular是一个专业开发的库，在商业许可下分发。从 2020 年 12 月开始，Kendo UI for Angular需要商业许可证密钥或有效的试用许可证密钥。更多产品授权信息，欢迎咨询“在线客服”了解！

Kendo UI for Angular | 下载试用

Kendo UI for Angular是Kendo UI系列商业产品的最新产品。Kendo UI for Angular是专用于Angular开发的专业级Angular组件。telerik致力于提供纯粹的高性能Angular UI组件，无需任何jQuery依赖关系。