界面组件Kendo UI for Angular——让应用数据显示更直观！（一）

Kendo UI致力于新的开发，来满足不断变化的需求，通过React框架的Kendo UI JavaScript封装来支持React Javascript框架。Kendo UI for Angular是专用于Angular开发的专业级Angular组件，telerik致力于提供纯粹的高性能Angular UI组件，无需任何jQuery依赖关系。

Kendo UI R3 2022正式版下载

Telerik_KendoUI产品技术交流群：726377843 欢迎一起进群讨论
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:
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>

了解最新Kendo UI最新资讯，请关注Telerik中文网！