Angular 6按日期排序对象数组

Question

我尝试按日期为我的Angular 6应用程序排序数组对象.数据具有字符串格式.我想知道是否有一个现有的模块在Angular中执行排序,或者我们必须在Typescript中构建排序函数.

角度模板

<app-item *ngFor="let item of someArray"></app-item>

数组

[
  {
    CREATE_TS: "2018-08-15 17:17:30.0",
    Key1: "Val1",
    Key2: "Val2",
  },
  {
    CREATE_TS: "2018-08-15 17:25:30.0",
    Key1: "Val1",
    Key2: "Val2",
  },
  {
    CREATE_TS: "2018-08-15 17:28:30.0",
    Key1: "Val1",
    Key2: "Val2",
  }
]

Answer 1

对于最近的第一：

this.data.sort((a, b) => new Date(b.date1).getTime() - new Date(a.date1).getTime());

对于 OlderFirst：

this.data.sort((b, a) => new Date(b.date1).getTime() - new Date(a.date1).getTime());

Answer 2

你可以使用 sort数组函数,它需要比较函数.将Date字符串解析为日期对象并按其排序.

在这里阅读更多信息

var myArr = [


{
    CREATE_TS: "2018-08-15 17:17:30.0",
    Key1: "Val1",
    Key2: "Val2",
  },
  {
    CREATE_TS: "2018-08-15 17:25:30.0",
    Key1: "Val1",
    Key2: "Val2",
  },
  {
    CREATE_TS: "2018-08-15 17:28:30.0",
    Key1: "Val1",
    Key2: "Val2",
  }
]
myArr.sort((val)=> {return new Date(val.CREATE_TS)})

上升

myArr.sort((val1, val2)=> {return new Date(val1.CREATE_TS) - new 
Date(val2.CREATE_TS)})

降序

myArr.sort((val1, val2)=> {return new Date(val2.CREATE_TS) - new 
Date(val1.CREATE_TS)})

Answer 3

除了神秘的答案之外,您可能希望将已排序的值包装在一个访问器中以包含在模板中,在您的typescript类中添加一个getter:

public get sortedArray(): YourItemType[] {
    return this.myArr.sort(...);
}

并在模板中:

<app-item *ngFor="let item of sortedArray"></app-item>

或者,您可以在将数组放入组件类并对其中存储已排序的版本时对其进行排序,但是访问器模式对于动态排序非常有用.

Answer 4

您可以Array.sort用于排序数据。

我已经在Stackblitz上创建了一个演示 。我希望这会对您/其他人有所帮助/指导。

component.ts

  data = [
    {
      CREATE_TS: "2018-08-15 17:17:30.0",
      Key1: "Val1",
      Key2: "Val2",
    },
    {
      CREATE_TS: "2018-08-15 17:25:30.0",
      Key1: "Val1",
      Key2: "Val2",
    },
    {
      CREATE_TS: "2018-08-15 17:28:30.0",
      Key1: "Val1",
      Key2: "Val2",
    }
  ]

  get sortData() {
    return this.data.sort((a, b) => {
      return <any>new Date(b.CREATE_TS) - <any>new Date(a.CREATE_TS);
    });
  }

component.html

<div *ngFor="let item of sortData">
  {{item.Key1}} -- {{item.CREATE_TS}} 
</div>

Answer 5

从查看文档来看，似乎没有任何内置的数组排序。但是，您可以在模板中执行此操作：

<app-item *ngFor="let item of someArray.sort(sortFunc)"></app-item>

然后在你的 component.ts 文件中定义函数，因为你不能在模板中定义函数：

sortFunc (a, b) {
  return a.CREATE_TS - b.CREATE_TS
}

编辑：Simon K 指出，字符串格式允许直接比较，而无需强制转换为日期，然后转换为数字。我原来的等式（对于日期字符串不太方便的情况）：

return new Date(a.CREATE_TS).getTime() - new Date(b.CREATE_TS).getTime()

Answer 6

使用Typescript中的此方法，您可以轻松按任意顺序对日期值进行排序。您还可以通过简单地删除新的Date（）和getTime方法来对任何其他类型的数据类型（例如数字或字符串）进行排序。

this.data.sort((a, b) => new Date(b.CREATE_TS).getTime() - new Date(a.CREATE_TS).getTime());