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数组。您可以传递一个需要对其进行排序的键。另外，如果需要，您可以按相反的顺序进行排序。

同样，您无需修改数据并重新分配。管道和角度将根据传递的输入进行排序，并且它们将显示在UI上。而且您可以在代码中使用此Pipe。

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

希望这会有所帮助:)。让我知道您是否仍然遇到任何问题。

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

1 个答案: