Kendo UI for Angular是專(zhuān)業(yè)級(jí)的Angular UI組件庫(kù)，不僅是將其他供應(yīng)商提供的現(xiàn)有組件封裝起來(lái)，telerik致力于提供純粹高性能的Angular UI組件，而無(wú)需任何jQuery依賴(lài)關(guān)系。無(wú)論您是使用TypeScript還是JavaScript開(kāi)發(fā)Angular應(yīng)用程序，Kendo UI for Angular都能為Angular項(xiàng)目提供專(zhuān)業(yè)的、企業(yè)級(jí)UI組件。

在本文中，我們將學(xué)習(xí)如何在Kendo UI for Angular Grid組件中使用Angular的httpResource API，將使用 Angular 的新特性 httpResource 從 API 獲取數(shù)據(jù)，并將這些數(shù)據(jù)展示在 Kendo UI for Angular Grid 中。

Kendo UI 2025 Q3新版下載

Telerik_KendoUI產(chǎn)品技術(shù)交流群：726377843    歡迎一起進(jìn)群討論

本文假設(shè)您已創(chuàng)建一個(gè) Angular 20 的項(xiàng)目。

對(duì)于本文，我們將使用返回product列表的API端點(diǎn)，如下圖所示。

為了表示這個(gè)響應(yīng)類(lèi)型，我們可以在 Angular 應(yīng)用中定義一個(gè)接口：

export interface IProductModel {
id: string;
name: string;
description: string;
price: number;
category: string;
}

我們將使用 Angular 20 的 httpResource API 來(lái)獲取 API 數(shù)據(jù)。通過(guò)在底層使用HttpClient擴(kuò)展了Resource API，提供了一種無(wú)縫的方式來(lái)發(fā)出HTTP請(qǐng)求，同時(shí)支持?jǐn)r截器和現(xiàn)有的測(cè)試工具。

• httpResource 基于 resource primitive 構(gòu)建；
• 使用 HttpClient 作為其加載器；
• 作為 @angular/common/http 的抽象封裝；
• 通過(guò) Angular 的 HTTP 棧發(fā)起請(qǐng)求；
• 與攔截器兼容。

在應(yīng)用程序中，您可以使用httpResource API獲取數(shù)據(jù)，如下所示：

products = httpResource<IProductModel[]>(() => `//localhost:3000/product`);

htppResource API返回一個(gè)WritableResource，并且具有只讀屬性，例如：

• Value
• Status
• Error
• isLoading

這些屬性都是 signal 類(lèi)型，可以在 effect 中追蹤，例如：

constructor() {
effect(() => {
console.log('products', this.products.value());
console.log('products error', this.products.error()?.message);
console.log('products satus', this.products.status());
})
}

運(yùn)行項(xiàng)目后，瀏覽器控制臺(tái)顯示 API 返回的數(shù)據(jù)。

接下來(lái)，我們使用 Kendo UI for Angular Grid 組件展示產(chǎn)品數(shù)據(jù)。首先，在 Angular 項(xiàng)目中添加 Kendo UI Grid 的庫(kù)，在Angular項(xiàng)目文件夾中運(yùn)行下面的命令。

ng add @progress/kendo-angular-grid

該命令提示您確認(rèn)要繼續(xù)，按Y鍵在Angular項(xiàng)目中安裝Kendo UI for Angular Grid包。

安裝成功完成后，你會(huì)注意到在packagejson文件中添加了對(duì)Angular的Kendo UI的引用。

 同樣在angular.json文件中，您可以看到一個(gè)關(guān)于Kendo UI Default主題的條目。

總而言之，ng add命令執(zhí)行以下操作：

• 將@progress/kendo-angular-grid包作為依賴(lài)項(xiàng)添加到packag.json文件中
• 將所有必需的對(duì)等依賴(lài)項(xiàng)添加到packag.json文件
• 在angular.json文件中添加Kendo UI默認(rèn)主題

要使用Kendo UI Grid，首先導(dǎo)入組件KENDO_GRID。

import { KENDO_GRID } from '@progress/kendo-angular-grid';

接下來(lái)，將其傳遞給imports數(shù)組：

@Component({
selector: 'app-root',
imports: [KENDO_GRID],
templateUrl: './app.html',
styleUrl: './app.scss'
})

把這些放在一起，使用Kendo UI Grid的組件應(yīng)該是這樣的：

import { httpResource } from '@angular/common/http';
import { Component, effect } from '@angular/core';
import { IProductModel } from './product-model';
import { KENDO_GRID } from '@progress/kendo-angular-grid';

@Component({
selector: 'app-root',
imports: [KENDO_GRID],
templateUrl: './app.html',
styleUrl: './app.scss'
})
export class App {
protected title = 'Kendo UI Grid Demo';
constructor() {
effect(() => {
console.log('products', this.products.value());
console.log('products error', this.products.error()?.message);
console.log('products satus', this.products.status());
})
}
products = httpResource<IProductModel[]>(() => `//localhost:3000/product`);
}

現(xiàn)在在模板上，可以使用Kendo UI Grid，如下所示。

@if(products.value()){
<kendo-grid [data]="products.value() || []">
<kendo-grid-column field="id" title="ID"> </kendo-grid-column>
<kendo-grid-column field="name" title="Name"> </kendo-grid-column>
<kendo-grid-column field="description" title="Description"> </kendo-grid-column>
<kendo-grid-column field="price" title="Price"> </kendo-grid-column>
<kendo-grid-column field="category" title="Category"> </kendo-grid-column>
</kendo-grid>
}
@else {
<p>Loading products...</p>
}

使用Kendo UI Grid很簡(jiǎn)單，首先檢查products資源是否已成功解析，然后配置網(wǎng)格將其列映射到Product模型的屬性。

作為輸出，您可以看到在Kendo UI Grid中渲染的所有100個(gè)產(chǎn)品，如下圖所示：

接下來(lái)，讓我們啟用客戶(hù)端分頁(yè)。這在Kendo UI Grid中很簡(jiǎn)單，設(shè)置以下屬性：

1. Pageable
2. pageSize

@if(products.value()){
<kendo-grid [kendoGridBinding]="products.value() || []"
[pageable]="true"
[pageSize]="5">>
<kendo-grid-column field="id" title="ID"> </kendo-grid-column>
<kendo-grid-column field="name" title="Name"> </kendo-grid-column>
<kendo-grid-column field="description" title="Description"> </kendo-grid-column>
<kendo-grid-column field="price" title="Price"> </kendo-grid-column>
<kendo-grid-column field="category" title="Category"> </kendo-grid-column>
</kendo-grid>
}
@else {
<p>Loading products...</p>
}

現(xiàn)在當(dāng)您運(yùn)行應(yīng)用程序時(shí)，將看到在Kendo UI Grid中啟用了客戶(hù)端分頁(yè)。

接下來(lái)，讓我們啟用客戶(hù)端排序。這在Kendo UI Grid中很簡(jiǎn)單——將Sortable屬性設(shè)置為true。

@if(products.value()){
<kendo-grid [kendoGridBinding]="products.value() || []"
[pageable]="true"
[pageSize]="5"
[sortable]="true">
<kendo-grid-column field="id" title="ID"> </kendo-grid-column>
<kendo-grid-column field="name" title="Name"> </kendo-grid-column>
<kendo-grid-column field="description" title="Description"> </kendo-grid-column>
<kendo-grid-column field="price" title="Price"> </kendo-grid-column>
<kendo-grid-column field="category" title="Category"> </kendo-grid-column>
</kendo-grid>
}
@else {
<p>Loading products...</p>
}

現(xiàn)在，當(dāng)您運(yùn)行應(yīng)用程序時(shí)，將看到在Kendo UI Grid中啟用了客戶(hù)端排序。

更多產(chǎn)品資訊及授權(quán)，歡迎來(lái)電咨詢(xún)：023-68661681

關(guān)于慧都科技

慧都是?家?業(yè)數(shù)字化解決?案公司，專(zhuān)注于軟件、?油與?業(yè)領(lǐng)域，以深?的業(yè)務(wù)理解和?業(yè)經(jīng)驗(yàn)，幫助企業(yè)實(shí)現(xiàn)智能化轉(zhuǎn)型與持續(xù)競(jìng)爭(zhēng)優(yōu)勢(shì)。

慧都是Kendo UI中國(guó)區(qū)的合作伙伴，Kendo UI作為用戶(hù)界面領(lǐng)域的優(yōu)秀產(chǎn)品，通過(guò)集成響應(yīng)式UI組件（如數(shù)據(jù)網(wǎng)格、圖表、調(diào)度器）和跨框架支持（jQuery/Angular/React/Vue），幫助企業(yè)快速構(gòu)建數(shù)據(jù)密集型的Web應(yīng)用（如ERP、CRM、電商平臺(tái)），實(shí)現(xiàn)動(dòng)態(tài)數(shù)據(jù)交互、實(shí)時(shí)可視化及多端一致的用戶(hù)體驗(yàn)。