Question

我有一个角度垫表，可以正确显示数据。我正在尝试通过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>

如何使垫子排序工作？谢谢，

Answer 1

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

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

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

您可以在documentatiion中找到清晰的示例。

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

Answer 2

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

Answer 3

您需要导入MatSortModule

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

请参见https://stackblitz.com/angular/oolrmmvqyjd?file=app%2Ftable-sorting-example.ts的material-module

Answer 4

我解决了：

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

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

4 个答案: