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

Kendo UI致力于新的开发，来满足不断变化的需求，通过React框架的Kendo UI JavaScript封装来支持React Javascript框架。

在应用程序中显示数据最常见的方法是使用列表或表格，它允许用户对数据进行列表、筛选、排序和分页。Angular Material是一个包，它为开发者提供一个组件列表，用来在应用中使用它的组件创建一个漂亮的界面。

Kendo Angular技术团队创建并支持Angular Material，它提供了一套遵循Material设计指南的可视化组件，允许开发者研发一致的用户界面。

添加Angular Material

首先创建项目。

ng new datagrid-with-angular-material

通过ng add命令安装Angular CLI帮助的所有Angular Material依赖项，它将在项目中添加并注册Angular Material。

ng add @angular/materialdatagrid-with-angular-material>ng add @angular/materiali 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 proceedYes√ Packages successfully installed.Choose a prebuilt theme name, or "custom" for a custom theme: Indigo/Pink [ Preview:https://material.angular.ioheme=indigo-pink ]Set up global Angular Material typography stylesYesInclude the Angular animations moduleInclude and enable animationsUPDATE 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: 1last_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    欢迎一起进群讨论