为什么 mat-sort 不适用于计算列?
Why mat-sort not work with computed column?
再见,
我正在使用 Angular 8,但在对 "computed" 列进行排序时遇到问题。假设我有一个具有两个属性名称和描述的对象,如果我尝试将值与 .ts 文件中的函数连接,排序将不起作用。
这是我的标记:
<div class="col-md-12">
<div class="row">
<div class="example-container mat-elevation-z8">
<mat-table [dataSource]="dataSource" matSort>
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
<ng-container matColumnDef="name">
<mat-header-cell *matHeaderCellDef mat-sort-header> TOKEN NAME </mat-header-cell>
<mat-cell *matCellDef="let row"> {{row.name}} </mat-cell>
</ng-container>
<ng-container matColumnDef="description">
<mat-header-cell *matHeaderCellDef mat-sort-header> INDUSTRY </mat-header-cell>
<mat-cell *matCellDef="let row" [style.color]=""> {{row.description}} </mat-cell>
</ng-container>
<ng-container matColumnDef="namedescription">
<mat-header-cell *matHeaderCellDef mat-sort-header> NameDescription </mat-header-cell>
<mat-cell *matCellDef="let row" [style.color]=""> {{concatena(row)}} </mat-cell>
</ng-container>
</mat-table>
<mat-paginator #paginator [pageSizeOptions]="[5, 10, 25, 100]"></mat-paginator>
</div>
</div>
</div>
这是我的代码:
import { Component, ViewChild, OnInit, ElementRef } from '@angular/core';
import { MatPaginator, MatSort, MatTableDataSource } from '@angular/material';
import { Router } from '@angular/router';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
name = 'Angular 5';
displayedColumns = ['name', 'description', 'namedescription'];
dataSource: MatTableDataSource<any> = new MatTableDataSource(this.loadTokens());
id: any;
// resultsLength = 0;
// pageSize = 5;
@ViewChild(MatPaginator) paginator: MatPaginator;
@ViewChild(MatSort) sort: MatSort;
constructor() { }
ngOnInit() {
this.loadTokens();
}
loadTokens() {
return [
{
"name": "sss",
"description": "It"
},
{
"name": "aa",
"description": "Hositality"
},
{
"name": "bbb",
"description": "Construction"
},
{
"name": "ccc",
"description": "sample data1"
},
{
"name": "ddd",
"description": "sample data2"
},
{
"name": "eee",
"description": "sample data3"
},
];
}
ngAfterViewInit() {
this.dataSource.paginator = this.paginator;
this.dataSource.sort = this.sort;
}
applyFilter(filterValue: string) {
filterValue = filterValue.trim(); // Remove whitespace
filterValue = filterValue.toLowerCase(); // Datasource defaults to lowercase matches
this.dataSource.filter = filterValue;
}
concatena(row: any):any{
return row.name + ' ' + row.description;
}
}
我已经在 stackbliz 上重现了这个问题。
https://stackblitz.com/edit/mat-sort-p4ypos
我该如何解决这个问题?
谢谢
您可以自己处理数据排序以完成这项工作:
ngAfterViewInit() {
this.dataSource.paginator = this.paginator;
this.dataSource.sortingDataAccessor = (item, property) => {
switch (property) {
case 'namedescription':
return item.name + ' ' + item.description;
default:
return item[property];
}
};
this.dataSource.sort = this.sort;
}
您可以在将动态数据发送到 MatTableDataSource 之前创建动态数据,这样它就会知道它的值。
基本上
dataSource: MatTableDataSource<any> = new MatTableDataSource(this.addRowDescription(this.loadTokens()));
addRowDescription(data: any[]): any[] {
return data.map((row: any) => ({
...row,
namedescription: row.name + " " + row.description
}));
}
再见,
我正在使用 Angular 8,但在对 "computed" 列进行排序时遇到问题。假设我有一个具有两个属性名称和描述的对象,如果我尝试将值与 .ts 文件中的函数连接,排序将不起作用。
这是我的标记:
<div class="col-md-12">
<div class="row">
<div class="example-container mat-elevation-z8">
<mat-table [dataSource]="dataSource" matSort>
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
<ng-container matColumnDef="name">
<mat-header-cell *matHeaderCellDef mat-sort-header> TOKEN NAME </mat-header-cell>
<mat-cell *matCellDef="let row"> {{row.name}} </mat-cell>
</ng-container>
<ng-container matColumnDef="description">
<mat-header-cell *matHeaderCellDef mat-sort-header> INDUSTRY </mat-header-cell>
<mat-cell *matCellDef="let row" [style.color]=""> {{row.description}} </mat-cell>
</ng-container>
<ng-container matColumnDef="namedescription">
<mat-header-cell *matHeaderCellDef mat-sort-header> NameDescription </mat-header-cell>
<mat-cell *matCellDef="let row" [style.color]=""> {{concatena(row)}} </mat-cell>
</ng-container>
</mat-table>
<mat-paginator #paginator [pageSizeOptions]="[5, 10, 25, 100]"></mat-paginator>
</div>
</div>
</div>
这是我的代码:
import { Component, ViewChild, OnInit, ElementRef } from '@angular/core';
import { MatPaginator, MatSort, MatTableDataSource } from '@angular/material';
import { Router } from '@angular/router';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
name = 'Angular 5';
displayedColumns = ['name', 'description', 'namedescription'];
dataSource: MatTableDataSource<any> = new MatTableDataSource(this.loadTokens());
id: any;
// resultsLength = 0;
// pageSize = 5;
@ViewChild(MatPaginator) paginator: MatPaginator;
@ViewChild(MatSort) sort: MatSort;
constructor() { }
ngOnInit() {
this.loadTokens();
}
loadTokens() {
return [
{
"name": "sss",
"description": "It"
},
{
"name": "aa",
"description": "Hositality"
},
{
"name": "bbb",
"description": "Construction"
},
{
"name": "ccc",
"description": "sample data1"
},
{
"name": "ddd",
"description": "sample data2"
},
{
"name": "eee",
"description": "sample data3"
},
];
}
ngAfterViewInit() {
this.dataSource.paginator = this.paginator;
this.dataSource.sort = this.sort;
}
applyFilter(filterValue: string) {
filterValue = filterValue.trim(); // Remove whitespace
filterValue = filterValue.toLowerCase(); // Datasource defaults to lowercase matches
this.dataSource.filter = filterValue;
}
concatena(row: any):any{
return row.name + ' ' + row.description;
}
}
我已经在 stackbliz 上重现了这个问题。
https://stackblitz.com/edit/mat-sort-p4ypos
我该如何解决这个问题?
谢谢
您可以自己处理数据排序以完成这项工作:
ngAfterViewInit() {
this.dataSource.paginator = this.paginator;
this.dataSource.sortingDataAccessor = (item, property) => {
switch (property) {
case 'namedescription':
return item.name + ' ' + item.description;
default:
return item[property];
}
};
this.dataSource.sort = this.sort;
}
您可以在将动态数据发送到 MatTableDataSource 之前创建动态数据,这样它就会知道它的值。
基本上
dataSource: MatTableDataSource<any> = new MatTableDataSource(this.addRowDescription(this.loadTokens()));
addRowDescription(data: any[]): any[] {
return data.map((row: any) => ({
...row,
namedescription: row.name + " " + row.description
}));
}