Angular Material 8 中的排序表

Question

我是 angular 的新手，在瀏覽視頻並參考文檔后開始構建。 分頁工作得很好，但我在對表格進行排序時遇到問題。 我嘗試了以下方法。

組件.html

    <table mat-table [dataSource]="dataSource" matSort class="mat-elevation-z8">

        <!-- Name Column -->
        <ng-container matColumnDef="Name">
            <th mat-header-cell *matHeaderCellDef mat-sort-header> Name </th>
            <td mat-cell *matCellDef="let environment"> <a for="env" id="env"
                (click)="openEditDialog(environment)">{{environment.environmentName}}</a> </td>
        </ng-container>

        <!-- URL Column -->
        <ng-container matColumnDef="URL">
            <th mat-header-cell *matHeaderCellDef mat-sort-header> URL </th>
            <td mat-cell *matCellDef="let environment"> {{environment.url}} </td>
        </ng-container>

        <!-- Username Column -->
        <ng-container matColumnDef="Username">
            <th mat-header-cell *matHeaderCellDef mat-sort-header> Username </th>
            <td mat-cell *matCellDef="let environment"> {{environment.userName}} </td>
        </ng-container>

        <!-- Details Column -->
        <ng-container matColumnDef="Details">
            <th mat-header-cell *matHeaderCellDef mat-sort-header> Details </th>
            <td mat-cell *matCellDef="let environment"> {{environment.details}} </td>
        </ng-container>

        <!-- Delete Column -->
        <ng-container matColumnDef="Delete">
            <th mat-header-cell *matHeaderCellDef> Delete </th>
            <td mat-cell *matCellDef="let environment"><a for="deleteEnvironment" id="deleteEnvironment"
                (click)="deleteEnvironment(environment._id)">
                <mat-icon style="color: #d2002b;">delete_forever</mat-icon>
            </a> </td>
        </ng-container>

        <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
        <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
    </table>
    <mat-paginator style="bottom: 0px; position: sticky;" [length]="100" [pageSize]="10" [pageSizeOptions]="[5, 10, 25, 100]" showFirstLastButtons>
        </mat-paginator>

這是我的 component.ts 文件

            import { Component, OnInit, Inject, ViewChild } from '@angular/core';
            import { FormGroup, FormBuilder } from '@angular/forms';
            import {MatDialog, MatDialogRef, MAT_DIALOG_DATA} from '@angular/material/dialog';
            import {EnvironmentService} from '../../services/environment.service';
            import {Environment} from '../../services/environment.model';
            import {MatSort} from '@angular/material/sort';
            import {MatTableDataSource} from '@angular/material/table';
            import { MatPaginator } from '@angular/material';

            export interface DialogData {  
              environment: string;    
              dialogTitle: string;
            }

            @Component({
              selector: 'app-environment',
              templateUrl: './environment.component.html',
              styleUrls: ['./environment.component.css'],
              providers: [EnvironmentService] 
            })
            export class EnvironmentComponent implements OnInit {
              environmentDetailsForm: FormGroup;
              serverErrorMessages : string;
              environments: Environment[] = []; 
              displayedColumns = ['Name', 'URL', 'Username', 'Details', 'Delete'];

              // dataSource: MatTableDataSource<Environment>;
              dataSource = new MatTableDataSource(this.environments);

              @ViewChild(MatPaginator, {static: true}) paginator: MatPaginator;
              @ViewChild(MatSort, {static: true}) sort: MatSort;

              constructor(private formBuilder: FormBuilder,
                private environmentService:EnvironmentService,
                private router: Router,
                private dialog: MatDialog) { }

              ngOnInit() {
                this.environmentDetailsForm = this.formBuilder.group({});
                this.loadAllEnvironments();
                this.dataSource.sort = this.sort;
              }
            private loadAllEnvironments() {
                this.environmentService.getEnvironmentDetails()
                .subscribe(environments => {
                  this.environments = environments; 
                  this.dataSource = new MatTableDataSource(this.environments);
                  this.dataSource.paginator = this.paginator;
                });
                return this.environments;
            }
}

app.module.ts 文件

import { MatTableModule, MatPaginatorModule, MatSortModule } from from '@angular/material';

imports: [
    MatTableModule,
    MatPaginatorModule,
    MatSortModule
]

單擊表標題時出現向上和向下箭頭，並且控制台中沒有錯誤。 但是排序功能不起作用。 如果有什么遺漏，請告訴我。

Answer 1

看起來您唯一缺少的是將 matSortChange 事件鏈接到打字稿中的函數以進行排序。 嘗試這樣的事情：

在您的 HTML 中：

<mat-table matSort (matSortChange)="sortData($event)" />

在你的打字稿中：

// import Sort:
import {Sort} from '@angular/material/sort';

// define function to handle sorting:
sortData(sort: Sort) {
    const data = this.environments.slice();
    if (!sort.active || sort.direction === '') {
        this.dataSource = data;
        return;
    }

    this.dataSource = data.sort((a, b) => {
        const isAsc = sort.direction === 'asc';
        switch (sort.active) {
            case 'name': return compare(a.name, b.name, isAsc);
            case 'username': return compare(a.username, b.username, isAsc);
            default: return 0;
        }
    });
}

function compare(a: number | string, b: number | string, isAsc: boolean) { 
    return (a < b ? -1 : 1) * (isAsc ? 1 : -1);
}

Answer 2

終於，我知道缺少了什么。 必須指定mat-sort-header=" some name "以便我可以在@tommytarheel 提到的開關案例中使用該名稱進行比較。 我們可以這樣做。

<table mat-table [dataSource]="dataSource" matSort (matSortChange)="sortData($event)" class="mat-elevation-z8">
    <ng-container matColumnDef="Name">
          <th mat-header-cell *matHeaderCellDef mat-sort-header="name"> Name </th>
          <td mat-cell *matCellDef="let environment"> <a for="env" id="env"
            (click)="openEditDialog(environment)">{{environment.environmentName}}</a> </td>
    </ng-container>

代替

<table mat-table [dataSource]="dataSource" matSort class="mat-elevation-z8">
    <ng-container matColumnDef="Name">
          <th mat-header-cell *matHeaderCellDef mat-sort-header> Name </th>
          <td mat-cell *matCellDef="let environment"> <a for="env" id="env"
            (click)="openEditDialog(environment)">{{environment.environmentName}}</a> </td>
    </ng-container>

在 .ts 文件中，正如@tommytarheel 所提到的，我必須使 sortData 函數與他在回答中定義的完全相同。

// import Sort:
import {Sort} from '@angular/material/sort';

// define function to handle sorting:
sortData(sort: Sort) {
    const data = this.environments.slice();
    if (!sort.active || sort.direction === '') {
        this.dataSource = data;
        return;
    }

    this.dataSource = data.sort((a, b) => {
        const isAsc = sort.direction === 'asc';
        switch (sort.active) {
            case 'name': return compare(a.name, b.name, isAsc);
            case 'username': return compare(a.username, b.username, isAsc);
            default: return 0;
        }
    });
}

function compare(a: number | string, b: number | string, isAsc: boolean) { 
    return (a < b ? -1 : 1) * (isAsc ? 1 : -1);
}