Angular Material distinct mat-在多个表上排序
Angular Material distinct mat-在多个表上排序
提问于 2017-12-28 10:42:52
在Augular中的多个材料表上单独/不同的分页没有问题。但是，在一个页面上对不同的表进行排序并不像看起来那么简单。
谁能给我们指出一个使用材料角(版本4-5)表组件进行多表排序的工作示例。
谢谢
回答 6
Stack Overflow用户
发布于 2018-03-02 02:07:46
经过长时间的搜索，我终于找到了你的问题的解决方案，以及完整的解决方案和我找到某些部分的链接。希望这对你有效，因为它最终对我有效。
import { Component, AfterViewInit, ViewChild, ChangeDetectorRef } from '@angular/core';
import { MatSort, MatTableDataSource } from '@angular/material';
@Component({
templateUrl: './my-tables.component.html'
})
export class CopyInstructionsComponent implements AfterViewInit {
public myFirstTableData: MatTableDataSource<MyTableModel>;
public mySecondTableData: MatTableDataSource<MyTableModel>;
@ViewChild('firstTableSort') public firstTableSort: MatSort;
@ViewChild('secondTableSort') public secondTableSort: MatSort;
constructor(private cdRef: ChangeDetectorRef) {
// ...the rest of your code here to build the data structures.
}
ngAfterViewInit() {
this.myFirstTableData.sort = this.firstTableSort;
this.mySecondTableData.sort = this.secondTableSort;
// See => https://stackoverflow.com/questions/39787038/how-to-manage-angular2-expression-has-changed-after-it-was-checked-exception-w
this.cdRef.detectChanges()
}
}<mat-table
#firstTable
#firstTableSort="matSort"
[dataSource]="myFirstTableData"
matSort
>
<ng-container matColumnDef="column1">
<mat-header-cell *matHeaderCellDef mat-sort-header>Column 1</mat-header-cell>
<mat-cell *matCellDef="let row">{{ row.column1 }}</mat-cell>
</ng-container>
</mat-table>
<mat-table
#secondTable
#secondTableSort="matSort"
[dataSource]="mySecondTableData"
matSort
>
<ng-container matColumnDef="column1">
<mat-header-cell *matHeaderCellDef mat-sort-header>Column 1</mat-header-cell>
<mat-cell *matCellDef="let row">{{ row.column1 }}</mat-cell>
</ng-container>
</mat-table>
Stack Overflow用户
发布于 2019-11-07 18:29:52
在用头撞墙几个小时后，我终于成功了。
使用Angular v.8.2.0。
我假设所有必需的属性都已使用且正确(mat-sort、mat-table、[dataSource]、matColumnDef、mat-sort-header等)。
我有一个包含两个可排序表的简单组件(为简洁起见，我省略了不相关的代码)。
每个表在模板中都有一个唯一的ref属性。例如：
<table #table1>
<table #table2>然后，在组件中，我为每个排序器使用@ViewChild装饰器：
@ViewChild('table1', { read: MatSort, static: true }) sort1: MatSort;
@ViewChild('table2', { read: MatSort, static: true }) sort2: MatSort;read属性在这里非常重要。不要错过！
然后(在ngOnInit中)，我将分类器分配给每个表数据源，如官方文档中所示：
this.dataSource1.sort = this.sort1;
this.dataSource2.sort = this.sort2;我希望这个答案能帮助到一些人。
编辑:该解决方案也适用于Angular 9和10。
Stack Overflow用户
发布于 2018-11-14 00:45:03
下面是一个在多个表上进行mat排序的Angular 6工作解决方案：
import { MatSort, MatTableDataSource } from '@angular/material';..。
@ViewChild('sortCol1') sortCol1: MatSort;
@ViewChild('sortCol2') sortCol2: MatSort;..。
数据源1：
this.dataSource1 = new MatTableDataSource(this.dataSource1);
this.dataSource1.sort = this.sortCol1;数据源2：
this.dataSource2 = new MatTableDataSource(this.dataSource2);
this.dataSource2.sort = this.sortCol2;..。
表1(视图)：
<table mat-table #sortCol1="matSort" [dataSource]="dataSource1" matSort matSortActive="ID" matSortDirection="asc">
...
</table>表2(视图)：
<table mat-table #sortCol2="matSort" [dataSource]="dataSource2" matSort matSortActive="ID" matSortDirection="asc">
...
</table>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/48001006
复制相关文章
相似问题
腾讯云开发者
