Angular 6 按日期排序对象数组答案

【问题标题】：Angular 6 Sort Array of object by DateAngular 6 按日期排序对象数组
【发布时间】：2019-01-22 20:16:08
【问题描述】：

我尝试为我的 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",
  }
]

【问题讨论】：

标签： javascript angular typescript sorting angular6

【解决方案1】：

你可以使用 moment.js

const newArr = myArr.sort((a, b) => moment(b.date).unix() - moment(a.date).unix());

【讨论】：

【解决方案2】：

您应该首先将日期解析为毫秒，然后执行排序，以避免“算术运算的左侧必须是'any'、'number'、'bigint'或枚举类型" 返回新日期（a.CREATE_TS）时的打字稿错误 - 新日期（b.CREATE_TS）：

someArray.sort((a: any, b: any) => { return Date.parse(a.CREATE_TS) - Date.parse(b.CREATE_TS) });

【讨论】：

【解决方案3】：

近期优先：

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

对于老年人优先：

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

【讨论】：

两种情况下都应该是this.data.sort((a, b)

【解决方案4】：

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

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

【讨论】：

【解决方案5】：

您可以使用Array.sort 对数据进行排序。

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

组件.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>

【讨论】：

【解决方案6】：

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

<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()

【讨论】：

【解决方案7】：

除了 cryptic 的回答之外，您可能还希望将排序后的值包装在一个访问器中，以便包含在模板中，在您的 typescript 类中添加一个 getter：

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

在模板中：

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

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

【讨论】：

【解决方案8】：

您可以将sort 函数用于数组，它接受比较函数。将 Date 字符串解析为日期对象并按其排序。

阅读更多关于here

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

【讨论】：

鉴于时间戳的格式，您实际上不需要将它们转换为 Date 对象。一个简单的字符串比较 (val1.CREATE_TS > val2.CREATE_TS) 就足够了。
@SimonK 编译时出错，因为在排序比较中，它不能返回布尔值。
对，我忘了它应该是一个数字。去val1.CREATE_TS > val2.CREATE_TS ? 1 : -1
如果日期为空或空怎么办？ @Tiisetso