Angular Material 7 排序标题

The and matSort ，一个角度指令，用于向表头添加排序功能。

在本章中，我们将展示使用 Angular Material 显示排序标题所需的配置。

以下是修改后的模块描述符的内容 app.module.ts .

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {MatSortModule} from '@angular/material'
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        MatSortModule,
        FormsModule,
        ReactiveFormsModule
    ],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule { }

以下是修改后的 HTML 主机文件的内容 app.component.html .

<table matSort (matSortChange) = "sortFood($event)">
    <tr>
        <th mat-sort-header = "name">Dessert (100g)</th>
        <th mat-sort-header = "calories">Calories</th>
        <th mat-sort-header = "fat">Fat (g)</th>
        <th mat-sort-header = "carbs">Carbs (g)</th>
        <th mat-sort-header = "protein">Protein (g)</th>
    </tr>
    <tr *ngFor = "let food of sortedFood">
        <td>{{food.name}}</td>
        <td>{{food.calories}}</td>
        <td>{{food.fat}}</td>
        <td>{{food.carbs}}</td>
        <td>{{food.protein}}</td>
    </tr>
</table>

以下是修改后的ts文件内容 app.component.ts .

import {Component, Injectable} from '@angular/core';
import {Sort} from '@angular/material';
export interface Food {
    calories: number;
    carbs: number;
    fat: number;
    name: string;
    protein: number;
}
@Component({
    selector: 'app-root',
    templateUrl: 'app.component.html',
    styleUrls: ['app.component.css']
})
export class AppComponent { 
    foods: Food[] = [
        {name: 'Yogurt', calories: 159, fat: 6, carbs: 24, protein: 4},
        {name: 'Sandwich', calories: 237, fat: 9, carbs: 37, protein: 4},
        {name: 'Eclairs', calories: 262, fat: 16, carbs: 24, protein: 6},
        {name: 'Cupcakes', calories: 305, fat: 4, carbs: 67, protein: 4},
        {name: 'Gingerbreads', calories: 356, fat: 16, carbs: 49, protein: 4},
    ];
    sortedFood: Food[];
    constructor() {
        this.sortedFood = this.foods.slice();
    }
    sortFood(sort: Sort) {
        const data = this.foods.slice();
        if (!sort.active || sort.direction === '') {
            this.sortedFood = data;
            return;
        }
        this.sortedFood = data.sort((a, b) => {
            const isAsc = sort.direction === 'asc';
            switch (sort.active) {
                case 'name': return compare(a.name, b.name, isAsc);
                case 'calories': return compare(a.calories, b.calories, isAsc);
                case 'fat': return compare(a.fat, b.fat, isAsc);
                case 'carbs': return compare(a.carbs, b.carbs, isAsc);
                case 'protein': return compare(a.protein, b.protein, isAsc);
                default: return 0;
            }
        });
    }
}
function compare(a: number | string, b: number | string, isAsc: boolean) {
    return (a < b ? -1 : 1) * (isAsc ? 1 : -1);
}

Result

验证结果。

Details

• 在这里，我们创建了一个表。添加了 matSort 并处理其 matSortChange 事件。