如何将已排序的数据分配给不可变对象

Question

我正在从 ngrx/store 获取数据，此数据在前端排序。当数据排序时，我正在分配回值，但没有更新发生。我了解到数据是immutable。但是如何将值分配回immutable？

这是我的尝试：this.data - 排序后未更新。

this.data = this.data.slice().sort((a, b) => {
  if (this.sort) {
    if (isNaN(a)) {
      if (a[sortBy] < b[sortBy]) {
        return -1;
      }
    }
    if (!isNaN(a)) {
      return a[sortBy] - b[sortBy];
    }
  }
  if (!this.sort) {
    if (isNaN(a)) {
      if (b[sortBy] < a[sortBy]) {
        return -1;
      }
    }
    if (!isNaN(a)) {
      return b[sortBy] - a[sortBy];
    }
  }
});

Answer 1

在这种情况下，您可以使用 sortBy Pipe。下面是一个可以帮助你的代码。下面的代码能够处理 numbers, string, objects 的数组您可以传递一个需要应用排序的键。如果需要，您也可以按相反的顺序排序。

此外，您无需修改数据和重新分配。管道和 angular 将根据传递的输入进行排序，同样的内容将显示在 UI 上。您可以在代码中使用此管道。

import {
  Pipe,
  PipeTransform
} from "@angular/core";

@Pipe({
  name: "sortBy"
})
export class ArraySortByPipe implements PipeTransform {
  public transform(array: any[], reverse: boolean = false, prop ? : string) {
    if (!Array.isArray(array)) {
      return array;
    }
    if (array.length) {
      let sortedArray: any[];
      if (typeof array[0] === "string") {
        sortedArray = array.sort();
      }
      if (typeof array[0] === "number") {
        sortedArray = array.sort((a, b) => a - b);
      }
      if (typeof array[0] === "object" && prop) {
        sortedArray = array.sort((a, b) => a[prop].toString().localeCompare(b[prop].toString()));
      }
      return !reverse ? sortedArray : sortedArray.reverse();
    }
    return array;
  }
}

希望这对您有所帮助 :)。如果您仍然遇到任何问题，请告诉我。

如何将已排序的数据分配给不可变对象

How to assign sorted data to immutable object

javascript

angular

immutability

ecmascript-2016