时间戳

首页 > 解决方案 > MatSort 不使用 Angular 8 对 MatTable 中的数据进行排序

angular - MatSort 不使用 Angular 8 对 MatTable 中的数据进行排序

问题描述

我在 Angular 8 中有一个新的 Angular 项目，我在让 MatSort 对 MatTable 中的数据进行实际排序时遇到问题。

这是我的component.ts文件的简化版本：

import {
  AfterViewInit,
  Component,
  OnInit,
  ViewChild,
} from "@angular/core";
import { MatSort } from "@angular/material/sort";
import { MatTableDataSource } from "@angular/material/table";
import { IEmployeeInterface } from "../somepath/employee.interface";
import { EmployeeQueryService } from "../../somepath/employeequery.service";

@Component({
  styleUrls: ["./employeedetails.component.scss"],
  templateUrl: "./employeedetails.component.html"
})
export class TestQueryComponent implements OnInit, AfterViewInit {
    employeeItems: IEmployeeInterface[];
    employeeData: new MatTableDataSource<IEmployeeInterface>();

    employeeColumns = [
    "EmployeeName",
    "EmployeeAddress",
    "EmployeeSalary"
    ];

    @ViewChild(MatSort, {static: false}) sort: MatSort;

    constructor(private employeeQueryService: EmployeeQueryService) {
    /* OTHER CODE HERE */
    }

    ngOnInit() {
        this.getEmployeeData();
    }

   ngAfterViewInit() {
    this.employeeData.sort = this.sort;
  }

  private getEmployeeData() {
    this.employeeQueryService.getEmployeeData().subscribe(response => {
      this.employeeItems = response;
      this.employeeData.data = this.employeeItems;
    });
  }
}

我的html文件看起来像这样：

<table mat-table [dataSource]="employeeData" matSort>
    <ng-container matColumnDef="EmployeeName">
      <th mat-header-cell *matHeaderCellDef mat-sort-header="EmployeeName"> Employee</th>
      <td mat-cell *matCellDef="let element">{{element.employeeName}}</td>
    </ng-container>
    <ng-container matColumnDef="EmployeeAddress">
      <th mat-header-cell *matHeaderCellDef mat-sort-header="EmployeeAddress"> Employee Address/th>
      <td mat-cell *matCellDef="let element">{{element.employeeAddress}}</td>
    </ng-container>
    <ng-container matColumnDef="EmployeeSalary">
      <th mat-header-cell *matHeaderCellDef mat-sort-header="EmployeeSalary">Employee Salary </th>
      <td mat-cell *matCellDef=" let element">{{element.employeeSalary | currency}}</td>
    </ng-container>
    <tr mat-header-row *matHeaderRowDef="employeeColumns; sticky: true"></tr>
    <tr mat-row *matRowDef="let row; columns: employeeColumns;"></tr>
</table>

我对此有几点意见。

  1. 运行此程序时，浏览器中不会抛出任何控制台错误。
  2. 我有一个在 Angular 7 上运行的旧应用程序，与此非常相似，主要区别在于@ViewChild(MatSort, {static: false}) sort: MatSort;简单@ViewChild(MatSort) sort: MatSort;，并且排序在 Angular 7 应用程序中按预期工作。

  3. 我有以下内容app.module.ts：

    import { MatSortModule } from "@angular/material/sort";
@NgModule({...
exports: [
MatSortModule,
...],
imports: [
MatSortModule
]})```

我还在组件文件中尝试了以下变体，但没有任何运气：

ngAfterViewInit() {

  }

  private getEmployeeData() {
    this.employeeQueryService.getEmployeeData().subscribe(response => {
      this.employeeItems = response;
      this.employeeData.data = this.employeeItems;
      this.employeeData.sort = this.sort;
    });
  }

另外，如果我包括这个：

ngAfterViewInit() {
  this.employeeData.sort = this.sort;
  this.sort.sortChange.subscribe(x => console.log(x, this.employeeData.sort));
  }

每次单击尝试对列进行排序时，我都可以看到它似乎正在排序：{active:"EmployeeName", direction:"asc"}并且 MatSort 对象具有正确sortables的属性并且_direction属性是正确的。

这里会发生什么？谢谢

标签： angularangular-materialangular8mat-table

解决方案

我想到了。标签中的mat-sort-header属性<th>区分大小写。举个例子：

<ng-container matColumnDef="EmployeeName">
   <th mat-header-cell *matHeaderCellDef mat-sort-header="EmployeeName"> Employee</th>
   <td mat-cell *matCellDef="let element">{{element.employeeName}}</td>
</ng-container>

需要是这样的：

<ng-container matColumnDef="EmployeeName">
       <th mat-header-cell *matHeaderCellDef mat-sort-header="employeeName"> Employee</th>
       <td mat-cell *matCellDef="let element">{{element.employeeName}}</td>
    </ng-container>

在我生命中的 3-4 个小时里，我永远不会回来。

推荐阅读