Angular Material分类标题组件
Angular Material是一个UI组件库，由谷歌开发，目的是为了让Angular开发者以结构化和响应式的方式开发现代应用程序。通过使用这个库，我们可以大大增加终端用户的用户体验，从而为我们的应用程序赢得人气。这个库包含了现代的即用型元素，可以直接使用，只需最少或没有额外的代码。
该<mat-sort-header>组件用于根据升序或降序对一个表的数据进行排序。为了使排序工作顺利进行，我们必须<mat-sort-header>在每个表头中加入<mat-sort-header>，并提供一个ID来识别它。这些表头必须放在一个带有matSort指令的父元素中，这样，每当我们点击任何表头进行排序时，就会发出一个称为_matSortChange _的事件，其中包含排序方向和它被触发的列名的ID。
我们可以通过2种方式禁用一个表的排序。
- 我们可以在matSort指令上添加属性matSortDisabled，或
- 在任何单一表头上添加disabled属性
语法:
安装:
为了在Angular Material中使用Basic Card Section，我们必须在本地机器上安装Angular CLI，这将有助于添加和配置Angular material库。满足所需条件后，在Angular CLI上输入以下命令。
详细的安装过程请参考在Angular应用程序中添加Angular材料组件的文章。
添加排序头组件：
为了使用sort-header组件，我们需要将其导入我们的组件中，如下所示。
然后，我们需要把这个组件导入app.module.ts文件中。
项目结构:
安装成功后，项目结构将看起来像下面的图片。
Project Structure
例子：下面的例子说明了Angular Material Sort Header的实现。
import { Component, OnInit } from "@angular/core";
import { Sort } from "@angular/material/sort";
export interface Student {
physics: number;
maths: number;
chemistry: number;
name: string;
roll_number: number;
}
@Component({
selector: "app-sort-overview-example",
templateUrl: "sort-overview-example.component.html",
styleUrls: ["./sort-overview-example.component.css"],
})
export class SortOverviewExampleComponent implements OnInit {
ngOnInit(): void {}
school: Student[] = [
{ name: "Niall", physics: 91, chemistry: 86, maths: 84, roll_number: 4 },
{ name: "Liam", physics: 73, chemistry: 71, maths: 89, roll_number: 2 },
{ name: "Zayn", physics: 74, chemistry: 91, maths: 99, roll_number: 5 },
{ name: "Harry", physics: 82, chemistry: 80, maths: 92, roll_number: 3 },
{ name: "Louis", physics: 96, chemistry: 76, maths: 93, roll_number: 1 },
];
sortedData: Student[];
constructor() {
this.sortedData = this.school.slice();
}
sortData(sort: Sort) {
const data = this.school.slice();
if (!sort.active || sort.direction === "") {
this.sortedData = data;
return;
}
this.sortedData = data.sort((a, b) => {
const isAsc = sort.direction === "asc";
switch (sort.active) {
case "name":
return compare(a.name, b.name, isAsc);
case "roll_number":
return compare(a.roll_number, b.roll_number, isAsc);
case "maths":
return compare(a.maths, b.maths, isAsc);
case "physics":
return compare(a.physics, b.physics, isAsc);
case "chemistry":
return compare(a.chemistry, b.chemistry, isAsc);
default:
return 0;
}
});
}
}
function compare(a: number | string, b: number | string, isAsc: boolean) {
return (a < b ? -1 : 1) * (isAsc ? 1 : -1);
}
输出:
极客教程