为什么 mat-sort 不适用于计算列？答案

【问题标题】：Why mat-sort not work with computed column?为什么 mat-sort 不适用于计算列？
【发布时间】：2020-09-09 01:36:51
【问题描述】：

喏，

我正在使用 Angular 8，但在排序“计算”列时遇到问题。假设我有一个具有两个属性名称和描述的对象，如果我尝试将值与 .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

我该如何解决这个问题？

谢谢

【问题讨论】：

MatSort 默认按照 matColumnDef 中定义的属性排序，如果你没有指定任何不同的话。它查找属性是否存在并按其排序。 Cookie 和 Bojan Kogoj 的答案是您如何解决它。

标签： angular typescript sorting angular-material mat-table

【解决方案1】：

您可以自己处理数据排序以完成这项工作：

  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;

}

【讨论】：

【解决方案2】：

您可以在将动态数据发送到 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
    }));
  }

我添加了一个例子https://stackblitz.com/edit/mat-sort-owqwfk

【讨论】：