Kendo UI致力于新的開發，來滿足不斷變化的需求，通過React框架的Kendo UI JavaScript封裝來支持React Javascript框架。Kendo UI for Angular是專用于Angular開發的專業級Angular組件，telerik致力于提供純粹的高性能Angular UI組件，無需任何jQuery依賴關系。

Kendo UI R3 2022正式版下載

Angular Material是Angular團隊創建的一個流行庫，本文將為大家介紹如何使用mat-table來構建一個數據網格。

在應用程序中顯示數據最常見的方法是使用列表或表格，它允許用戶對數據進行列表、篩選、排序和分頁。Angular Material是一個包，它為開發者提供一個組件列表，用來在應用中使用它的組件創建一個漂亮的界面。

Kendo Angular技術團隊創建并支持Angular Material，它提供了一套遵循Material設計指南的可視化組件，允許開發者研發一致的用戶界面。

本文將用Angular Material構建一個數據網格，實現主要分為六個部分，重點是創建數據網格來顯示數據的mat-table指令來提高性能，允許排序、過濾和分頁。

添加Angular Material

首先創建項目。

ng new datagrid-with-angular-material

通過ng add命令安裝Angular CLI幫助的所有Angular Material依賴項，它將在項目中添加并注冊Angular Material。

ng add @angular/material
datagrid-with-angular-material>ng add @angular/material
i Using package manager: npm
√ Found compatible package version: @angular/material@14.0.3.
√ Package information loaded.

The package @angular/material@14.0.3 will be installed and executed.
Would you like to proceed? Yes
√ Packages successfully installed.
? Choose a prebuilt theme name, or "custom" for a custom theme: Indigo/Pink [ Preview:
//material.angular.io?theme=indigo-pink ]
? Set up global Angular Material typography styles? Yes
? Include the Angular animations module? Include and enable animations
UPDATE package.json (1127 bytes)
√ Packages installed successfully.
UPDATE src/app/app.module.ts (423 bytes)
UPDATE angular.json (3380 bytes)
UPDATE src/index.html (595 bytes)
UPDATE src/styles.scss (181 bytes)

Angular Material會修改應用程序的樣式以匹配Material Style指南。

接下來，修改app.module.ts文件，必須在其中導入MatTableModule。

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { MatTableModule } from '@angular/material/table';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

@NgModule({
declarations: [
AppComponent
],

imports: [
BrowserModule,
BrowserAnimationsModule,
MatTableModule
],

providers: [],
bootstrap: [AppComponent]
})

export class AppModule { }

接下來，我們將列出表中的數據。

用mat-table列出數據

修改app.component.ts文件，向模板和mat-table添加屬性，聲明一個ViewChild mytable來引用模板中的表參數。

@ViewChild(MatTable) mytable: MatTable<Article>;

使用matColumnDef創建屬性列來存儲每個列的名稱：

columns: string[] = ['name', position];

接下來，我們創建服務NbaService，因為它使用httpClient導入到app.模塊中。然后創建方法，并使用httpClient調用API。

API在屬性數據中返回一個NBA球員數組，以簡化對any的可觀察對象的代碼返回。

在現實世界中，我們必須將數據映射到接口。

name: "Alex"
id: 1
last_name: "Abrines"
position: "G"
}
]

在app.com component.ts中，必須將NbaService注入到構造函數中，并聲明一個新的屬性dataSource存儲來自NbaService的數據。

export class AppComponent implements OnInit {
dataSource : any;;
constructor(private nbaService: NbaService) {

}
}

在ngOnInit生命周期中，訂閱nbaService并將數據設置為數據源。

ngOnInit(): void {
this.nbaService.getData().subscribe((data) => {
this.dataSource = data;
});

接下來，使用mat-table指令聲明表的標記。

<table mat-table [dataSource]="datasource" class="mat-elevation-z8" #mytable>
<tr mat-header-row *matHeaderRowDef="columns"></tr>
<tr mat-row *matRowDef="let row; columns: columns;"></tr>
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef >Name</th>
<td mat-cell *matCellDef="let t">{{ t.first_name }}</td>
</ng-container>

<ng-container matColumnDef="team">
<th mat-header-cell *matHeaderCellDef>Position</th>
<td mat-cell *matCellDef="let t">{{ t.position }}</td>
</ng-container>

</table>

當我們定義表標記時，指定[dataSource]屬性與類中定義的數據源的綁定。

<table mat-table [dataSource]="datasource" class="mat-elevation-z8" #mytable>

對于列，我們通過使用columns屬性的一個組件初始化matColumnDef屬性來定義ng-container標簽，還創建列標題作為其內容：

<ng-container matColumnDef="FirstName">
<th mat-header-cell *matHeaderCellDef>Name</th>
<td mat-cell *matCellDef="let t">{{ t.first_name }}</td>
</ng-container>

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