Kendo UI緻力于新的開發，來滿足不斷變化的需求，通過React架構的Kendo UI JavaScript封裝來支援React Javascript架構。Kendo UI for Angular是專用于Angular開發的專業級Angular元件，telerik緻力于提供純粹的高性能Angular UI元件，無需任何jQuery依賴關系。
Kendo UI官方最新版免費下載下傳試用，曆史版本下載下傳，線上文檔和幫助檔案下載下傳-慧都網
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/[email protected].
√ Package information loaded.
The package @angular/[email protected] 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:
https://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> ![【angular】環境搭建及遇到的問題[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)