При сортировке таблицы материалов Angular вы можете просматривать данные, не изменяя их?

Question

Angular Таблица материалов использует метод MatTableDataSource с именем sortData() для сортировки источника данных таблицы. (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 возвращает исходные данные без какой-либо сортировки. Все, что я хочу сделать, это наблюдать за отсортированными данными, не изменяя их. Возможно ли это сделать?

Answer 1

Вы можете перезаписать 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;
}

Как видите, я едва изменил оригинальную функцию . Добавить удаленные типы в соответствии с вашими потребностями.

ps перезапись некоторых функций внутри MatTableDataSource является обычной практикой :

Может быть переопределено для пользовательской реализации упорядочения данных.

Answer 2

Konnichiwa ebakunin,

У меня та же проблема с переопределением нативного элемента, и есть простой способ получить данные сортировки, чтобы они не изменили исходное значение ваших данных.

Сначала вам нужно набрать asp ссылку в Array. Все, что нам нужно сделать, сделать глубокий клон. JSON методы являются наиболее совместимыми для применения этой ситуации без вызова другого метода, и нет никаких модификаций с помощью метода native- angular.

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

После этого создайте метод в dataSource, наблюдает данные, как вы хотите. В качестве альтернативы вы хотите настроить специальный sortData и следовать ему. Вместо прямого изменения верните вызванный метод, и вы получите более простое и гибкое использование, как будто вы не хотите помещать MatSort в аргументы, просто избавьтесь от него.

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);
  }
}

Answer 3

Надеюсь, я правильно понял ваш вопрос.

Итак, вам нужно отсортировать данные без их изменения.

Вы должны создать копию своих данных и отсортировать их. Вы можете использовать глобальную переменную или свойство.

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

Answer 4

Вы можете сделать одну вещь: перед сортировкой данных вы можете сохранить фактические данные в другой переменной и использовать ее.