角材料数据表排序不做任何事情答案

【问题标题】：Angular Material Data Table Sorting not doing anything角材料数据表排序不做任何事情
【发布时间】：2019-11-08 21:55:04
【问题描述】：

我有一个正确显示数据的角垫表。我正在尝试使用 mat-sort 添加排序功能。现在，小箭头出现在每列旁边，但是当点击它们时表格根本没有响应。通过将表格置于*ngIf 之外或在生命周期的后期设置datasource，解决了许多其他具有类似问题的 SO 问题。我不认为我的代码有这些问题，尽管我可能是错的。

table.component.ts

import { Component, Input, SimpleChanges, OnInit, ViewChild } from '@angular/core';
import { MatTableDataSource, MatSort } from '@angular/material';
import { SelectionModel } from '@angular/cdk/collections';

import { Data } from '...';

@Component({
    ...
})

export class WorkflowManagerTableComponent{

    @Input() data: Data[];
    @Input() title: string;
    @ViewChild(MatSort) sort: MatSort;
    displayedColumns: string[] = ['select'];
    dataProps: string[] = [];

    ngOnChanges(changes: SimpleChanges) {
        console.log("ngOnChanges")
        this.data = changes.data.currentValue;
        if (this.data) {
            this.dataSource = new MatTableDataSource(this.data);
            this.dataSource.sort = this.sort;
            this.dataArray = this.data;
            for (var property in this.data[0]){
                if(this.data[0].hasOwnProperty(property)){
                    this.dataProps.push(property)
                }
            }
            this.displayedColumns = this.displayedColumns.concat(this.dataProps);
        }
    }

    public dataArray: Data[];
    public dataSource: MatTableDataSource<Data>;1
}

table.component.html

<table mat-table matSort [dataSource]="dataArray" class="mat-elevation-z8">
    <ng-container *ngFor="let prop of dataProps" matColumnDef="{{prop}}">
        <th mat-header-cell *matHeaderCellDef  mat-sort-header> 
            {{prop}}
         </th>
         <td mat-cell *matCellDef="let data"> {{data[prop]}} </td>
     </ng-container>
</table>

我怎样才能让 mat sort 工作？谢谢，

【问题讨论】：

标签： angular angular-material

【解决方案1】：

我正在尝试使用您提供的代码示例。首先，您不必将更改 currentValue 分配给将为您设置的输入属性。

如果您尝试在材料数据表中进行排序，那么我希望在组件中看到排序功能。 Angular 不会为你排序。在调用sortChange 之后，将在 matSort viewChiled 属性的订阅函数中调用此排序函数。会是这样的：

this.sort.sortChange.subscribe(() => {
   // sorting implantation goes here; 
});

您可以在documentatiion 中找到明确的示例。

当您完成组件中的每个订阅时，您还应该取消订阅它。我希望这能回答你的问题。

【讨论】：

我在您提供的文档中找不到订阅的任何用途，它在哪个部分？
它要求服务器进行实际排序，因为大多数情况下发生的事情导致您没有全部数据。

【解决方案2】：

您应该在表格的最后一部分有和标记。
例如：
... <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr> <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr> </table>
这定义了内容的标题行和行。如果你没有这个，它就无法识别为标题，那么即使你有 mat-sort-header，排序当然也不起作用。
看看 Angular Material 网站上的第一个示例表。https://material.angular.io/components/table/examples

【讨论】：

我的代码中已经有这些标签，我没有将它们包含在这篇文章中，因为我认为它们不相关。

【解决方案3】：

你需要导入 MatSortModule

import { MatSortModule } from '@angular/material/sort';

见material-modulehttps://stackblitz.com/angular/oolrmmvqyjd?file=app%2Ftable-sorting-example.ts

【讨论】：

【解决方案4】：

我解决了：

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

【讨论】：