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

Kendo UI R3 2022正式版下載

Angular Material是Angular團(tuán)隊創(chuàng)建的一個流行庫，本文將為大家介紹如何使用mat-table來構(gòu)建一個數(shù)據(jù)網(wǎng)格。

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

Kendo Angular技術(shù)團(tuán)隊創(chuàng)建并支持Angular Material，它提供了一套遵循Material設(shè)計指南的可視化組件，允許開發(fā)者研發(fā)一致的用戶界面。

本文將用Angular Material構(gòu)建一個數(shù)據(jù)網(wǎng)格，實現(xiàn)主要分為六個部分，重點是創(chuàng)建數(shù)據(jù)網(wǎng)格來顯示數(shù)據(jù)的mat-table指令來提高性能，允許排序、過濾和分頁。

添加Angular Material

首先創(chuàng)建項目。

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會修改應(yīng)用程序的樣式以匹配Material Style指南。

接下來，修改app.module.ts文件，必須在其中導(dǎo)入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 { }

接下來，我們將列出表中的數(shù)據(jù)。

用mat-table列出數(shù)據(jù)

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

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

使用matColumnDef創(chuàng)建屬性列來存儲每個列的名稱：

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

接下來，我們創(chuàng)建服務(wù)NbaService，因為它使用httpClient導(dǎo)入到app.模塊中。然后創(chuàng)建方法，并使用httpClient調(diào)用API。

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

在現(xiàn)實世界中，我們必須將數(shù)據(jù)映射到接口。

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

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

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

}
}

在ngOnInit生命周期中，訂閱nbaService并將數(shù)據(jù)設(shè)置為數(shù)據(jù)源。

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

接下來，使用mat-table指令聲明表的標(biāo)記。

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

當(dāng)我們定義表標(biāo)記時，指定[dataSource]屬性與類中定義的數(shù)據(jù)源的綁定。

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

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

<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產(chǎn)品技術(shù)交流群：726377843    歡迎一起進(jìn)群討論