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

您可以对数组使用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)})

Answer 2

除了cryptic的答案外，您可能还希望将排序后的值包装在访问器中以包含在模板中，并在您的打字稿类中添加吸气剂：

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

并在模板中：

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

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

Answer 3

您可以使用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 4

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

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

Answer 5

针对最近的情况：

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 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指出，字符串格式允许直接比较，而不必强制转换为Date然后为数字。我的原始公式（用于日期字符串不太方便的情况）：

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

Answer 7

通过moment.js，您可以使用

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

Answer 8

您应首先将日期解析为毫秒，然后执行排序，以避免“算术运算的左侧必须为'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) });

Angular 6按日期排序对象数组

8 个答案: