对Angular Materialtable进行排序时是否可以不修改就查看数据？

Question

Angular Material table 利用名为 sortData() 的 MatTableDataSource 方法对 table 的数据源进行排序。 (https://material.angular.io/components/table/api#MatTableDataSource)。它是一个箭头函数：

sortData: ((data: T[], sort: MatSort) => T[])

我需要在不实际更改排序的情况下查看排序后的数据。例如，

this.dataSource.sortData = (sortData) => {
    console.log(sortData);
    return sortData;
};

这里的问题是我覆盖了本机排序功能。 return sortData returns 原始数据，没有任何排序。我想要做的就是观察排序后的数据而不修改它。可以这样做吗？

Answer 1

您可以做一件事，即在对数据进行排序之前，您可以将实际数据存储在另一个变量中并使用它。

Answer 2

希望我正确理解了你的问题。

因此，您需要在不修改数据的情况下对数据进行排序。

您应该创建一份数据副本并对其进行排序。您可以使用全局变量或属性.

let sortedData;
this.dataSource.sortData = (sortData) => {
    this.sortedData = {...sortData};
    // Any kind of sorting
    console.log(sortedData);
    return sortData;
};

Answer 3

您可以覆盖 sortData 函数：

this.dataSource.sortData = this.sortData;

...

sortData = function(data: any, sort: MatSort) {
  const active = sort.active;
  const direction = sort.direction;
  if (!active || direction == '') { return data; }

  const sorted = data.sort((a, b) => {
    let valueA = this.sortingDataAccessor(a, active);
    let valueB = this.sortingDataAccessor(b, active);

    // If both valueA and valueB exist (truthy), then compare the two. Otherwise, check if
    // one value exists while the other doesn't. In this case, existing value should come last.
    // This avoids inconsistent results when comparing values to undefined/null.
    // If neither value exists, return 0 (equal).
    let comparatorResult = 0;
    if (valueA != null && valueB != null) {
      // Check if one value is greater than the other; if equal, comparatorResult should remain 0.
      if (valueA > valueB) {
        comparatorResult = 1;
      } else if (valueA < valueB) {
        comparatorResult = -1;
      }
    } else if (valueA != null) {
      comparatorResult = 1;
    } else if (valueB != null) {
      comparatorResult = -1;
    }

    return comparatorResult * (direction == 'asc' ? 1 : -1);
  });

  console.log(sorted)
  return sorted;
}

如您所见，我几乎没有更改 original function。根据您的需要添加删除的类型。

p.s。覆盖 MatTableDataSource 中的一些函数 is a common practise:

May be overridden for a custom implementation of data ordering.

Answer 4

Konnichiwa ebakunin,

我对覆盖本机元素有同样的问题，有一种简单的方法可以获取不会更改数据本机值的排序数据。

首先你要设法掌握Array中的引用。我们所要做的就是进行深度克隆。 JSON 方法最适合应用这种情况，无需调用其他方法，并且没有与 native-angular 方法进行任何修改。

cloneDeep (Data:any){
  return JSON.parse(JSON.stringify(Data));
}

之后，根据需要在dataSource中创建方法观察数据。作为替代方案，您想要自定义特殊的 sortData 然后跟随它。而不是直接修改，return调用的方法，你会更容易使用和灵活，就像你不想把MatSort放在args中一样，把它去掉。

constructor(){
  //add the new method of the dataSource.
  this.sortedData.observeSortData = (data : T[],sort: MatSort) : T[] =>{
    let clone_data = this.cloneDeep(data);
    console.log(clone_data.sort((a,b)=> a - b)); // what order you want, place your fomula in your call back
    return this.sortData(data,sort);
  }
}

对Angular Materialtable进行排序时是否可以不修改就查看数据？

When sorting a Angular Material table can you view the data without modifying it?

angular

angular-material

angular-material-7

angular-material-table