时间戳

首页 > 解决方案 > Angular组件中的排序表

angular - Angular组件中的排序表

问题描述

我有两个 Angular 组件，一个是整个页面，它加载另一个组件，它只是一个表格。

vs 代码截图

该表通过 <app-detections-table [dataSource]="dataSource"></app-detections-table> in加载detections.component.html。
在detections-table.component.html我添加了

<table
mat-table
[dataSource]="dataSource"
#sort
matSort="sort"
>

和<th mat-header-cell *matHeaderCellDef mat-sort-header>Name</th>每个列标题。
在detections-table.component.ts我添加

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

现在，我得到了表格上的排序箭头，但是当我单击它们时没有任何反应。
如果我从表组件中删除数据源的传递，detections.component.html并且只在表组件中使用 JSON 对象，那么它会按预期工作，所以我认为排序detections-table.component.ts“为时已晚”，这就是我尝试添加this.dataSource.sort = this.sort到末尾的原因ngOnInit()中detections.component.ts，但这也没有做任何事情。
有人有小费吗？谢谢！

标签： angularsortingangular-material

解决方案

我在 mat-table 上遇到过类似的问题，我通过在 @Input 上使用 setter 并在单独的函数中加载表属性来解决它。

tableData = new MatTableDataSource([]);

@Input() set dataSource(value: any[]) {
    if(value) {
    this.loadTable(value);
    }
}

对于 loadTable，您可以执行以下操作：

loadTable(data: any[]) {
    this.tableData = new MatTableDataSource(data);
    this.tableData.sort = this.sort;
}

在此示例中，“tableData”变量成为您用于表的数据源，因此：

<table
mat-table
[dataSource]="dataSource"
#sort
matSort="sort"
>

会变成这样：

<table
mat-table
[dataSource]="tableData"
#sort
matSort="sort"
>

希望这可以解决您的问题！

推荐阅读