Javascript Angular 6 按日期对对象数组进行排序
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/51867404/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Angular 6 Sort Array of object by Date
提问by Huy Le
I try to sort the array object by date for my Angular 6 application. The data has string format. I wonder if there is an existing module to perform sort in Angular or we have to build sort function it in Typescript.
我尝试按日期对我的 Angular 6 应用程序的数组对象进行排序。数据具有字符串格式。我想知道是否有一个现有的模块可以在 Angular 中执行排序，或者我们必须在 Typescript 中构建排序功能。
Angular Template
角度模板
<app-item *ngFor="let item of someArray"></app-item>
The Array
数组
[
{
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",
}
]
采纳答案by derelict
in addition to cryptic's answer, you will likely want to wrap the sorted values in an accessor for including in the template, adding a getter in your typescript class:
除了神秘的答案之外，您可能还想将排序后的值包装在访问器中以包含在模板中，在您的打字稿类中添加一个 getter：
public get sortedArray(): YourItemType[] {
return this.myArr.sort(...);
}
and in the template:
并在模板中：
<app-item *ngFor="let item of sortedArray"></app-item>
alternately, you can sort the array as you get it into your component class and store the sorted version there, however the accessor pattern can be quite useful for dynamic sorting.
或者，您可以在将数组放入组件类时对其进行排序，并将排序后的版本存储在那里，但是访问器模式对于动态排序非常有用。
回答by Krishna Rathore
You can use Array.sortfor sort data.
您可以Array.sort用于排序数据。
I have created a demo on Stackblitz. I hope this will help/guide to you/others.
我在Stackblitz上创建了一个演示 。我希望这会对您/其他人有所帮助/指导。
component.ts
组件.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
组件.html
<div *ngFor="let item of sortData">
{{item.Key1}} -- {{item.CREATE_TS}}
</div>
回答by Tiisetso Tjabane
you can use the sortfunction for arrays, it takes in compare function. Parse the Date string into a date object and sort by it.
您可以将该 sort函数用于数组，它接受比较函数。将日期字符串解析为日期对象并按它排序。
read more about 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)})
Ascending
上升
myArr.sort((val1, val2)=> {return new Date(val1.CREATE_TS) - new
Date(val2.CREATE_TS)})
Descending
降序
myArr.sort((val1, val2)=> {return new Date(val2.CREATE_TS) - new
Date(val1.CREATE_TS)})
回答by Sarjerao Ghadage
Using this method in Typescript, you can easily sort date values in whatever order you'd like. You can also sort any type of other data types, like number or string, by simply removing the new Date() and getTime methods.
在 Typescript 中使用此方法，您可以轻松地按您喜欢的任何顺序对日期值进行排序。您还可以通过简单地删除新的 Date() 和 getTime 方法来对任何类型的其他数据类型（如数字或字符串）进行排序。
this.data.sort((a, b) => new Date(b.CREATE_TS).getTime() - new Date(a.CREATE_TS).getTime());
回答by Pruthvi Raj
For recent first:
对于最近的第一：
this.data.sort((a, b) => new Date(b.date1).getTime() - new Date(a.date1).getTime());
For OlderFirst:
对于 OlderFirst：
this.data.sort((b, a) => new Date(b.date1).getTime() - new Date(a.date1).getTime());
回答by Ben Steward
From looking through the docs, there doesn't seem to be any built-in array sorting. However, you can do this in your template:
通过查看文档，似乎没有任何内置的数组排序。但是，您可以在模板中执行此操作：
<app-item *ngFor="let item of someArray.sort(sortFunc)"></app-item>
And then in your component.ts file, define the function, because you cannot define functions in your template:
然后在你的 component.ts 文件中，定义函数，因为你不能在你的模板中定义函数：
sortFunc (a, b) {
return a.CREATE_TS - b.CREATE_TS
}
Edit: Simon K pointed out that the string format allows for straight comparison without coercing to Date and then to number. My original equation (for scenarios where your date string isn't that convenient):
编辑：Simon K 指出字符串格式允许直接比较，而无需强制到日期然后再到数字。我的原始公式（对于您的日期字符串不那么方便的情况）：
return new Date(a.CREATE_TS).getTime() - new Date(b.CREATE_TS).getTime()
回答by Lucian Popa
You should first parse the dates to miliseconds, then perform sorting, in order to avoid the "the left-hand side of an arithmetic operation must be of type 'any', 'number', 'bigint' or an enum type" typescript error when you return new Date(a.CREATE_TS) - new Date(b.CREATE_TS):
您应该首先将日期解析为毫秒，然后执行排序，以避免“算术运算的左侧必须是‘any’、‘number’、‘bigint’或枚举类型”类型的打字稿错误当您返回 new Date(a.CREATE_TS) - new Date(b.CREATE_TS) 时：
someArray.sort((a: any, b: any) => { return Date.parse(a.CREATE_TS) - Date.parse(b.CREATE_TS) });
