Kendo UI for Angular是專業級的Angular UI組件庫，不僅是將其他供應商提供的現有組件封裝起來，telerik致力于提供純粹高性能的Angular UI組件，而無需任何jQuery依賴關系。無論您是使用TypeScript還是JavaScript開發Angular應用程序，Kendo UI for Angular都能為Angular項目提供專業的、企業級UI組件。

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

Kendo UI 2025 Q3新版下載

Telerik_KendoUI產品技術交流群：726377843    歡迎一起進群討論

本文假設您已創建一個 Angular 20 的項目。

對于本文，我們將使用返回product列表的API端點，如下圖所示。

為了表示這個響應類型，我們可以在 Angular 應用中定義一個接口：

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

我們將使用 Angular 20 的 httpResource API 來獲取 API 數據。通過在底層使用HttpClient擴展了Resource API，提供了一種無縫的方式來發出HTTP請求，同時支持攔截器和現有的測試工具。

• httpResource 基于 resource primitive 構建；
• 使用 HttpClient 作為其加載器；
• 作為 @angular/common/http 的抽象封裝；
• 通過 Angular 的 HTTP 棧發起請求；
• 與攔截器兼容。

在應用程序中，您可以使用httpResource API獲取數據，如下所示：

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

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

• Value
• Status
• Error
• isLoading

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

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

運行項目后，瀏覽器控制臺顯示 API 返回的數據。

接下來，我們使用 Kendo UI for Angular Grid 組件展示產品數據。首先，在 Angular 項目中添加 Kendo UI Grid 的庫，在Angular項目文件夾中運行下面的命令。

ng add @progress/kendo-angular-grid

該命令提示您確認要繼續，按Y鍵在Angular項目中安裝Kendo UI for Angular Grid包。

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

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

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

• 將@progress/kendo-angular-grid包作為依賴項添加到packag.json文件中
• 將所有必需的對等依賴項添加到packag.json文件
• 在angular.json文件中添加Kendo UI默認主題

要使用Kendo UI Grid，首先導入組件KENDO_GRID。

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

接下來，將其傳遞給imports數組：

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

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

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`);
}

現在在模板上，可以使用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很簡單，首先檢查products資源是否已成功解析，然后配置網格將其列映射到Product模型的屬性。

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

接下來，讓我們啟用客戶端分頁。這在Kendo UI Grid中很簡單，設置以下屬性：

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

現在當您運行應用程序時，將看到在Kendo UI Grid中啟用了客戶端分頁。

接下來，讓我們啟用客戶端排序。這在Kendo UI Grid中很簡單——將Sortable屬性設置為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>
}

現在，當您運行應用程序時，將看到在Kendo UI Grid中啟用了客戶端排序。

更多產品資訊及授權，歡迎來電咨詢：023-68661681

關于慧都科技

慧都是?家?業數字化解決?案公司，專注于軟件、?油與?業領域，以深?的業務理解和?業經驗，幫助企業實現智能化轉型與持續競爭優勢。

慧都是Kendo UI中國區的合作伙伴，Kendo UI作為用戶界面領域的優秀產品，通過集成響應式UI組件（如數據網格、圖表、調度器）和跨框架支持（jQuery/Angular/React/Vue），幫助企業快速構建數據密集型的Web應用（如ERP、CRM、電商平臺），實現動態數據交互、實時可視化及多端一致的用戶體驗。