说我有一个Event
集合:
export class Event {
startingTime: Date
}
我想显示从最接近今天开始订购的那些,那OrderByUpcomingToLatestPipe
会是什么样的?
<event-element *ngFor="let event of events | orderByUpcomingToLatest"></event-element>
我希望当最接近今天的日期是第一个时,数组按降序排列,而距离今天最远的日期是最后一个(已经过去的日期将以远程命令的方式相同)
答案 0 :(得分:4)
不要使用烟斗进行订购。来自Pipes documentation:
的摘录附录:没有FilterPipe或OrderByPipe
Angular不提供过滤或排序列表的管道。 熟悉AngularJS的开发人员将这些知道为filter和orderBy。 Angular没有等价物。
这不是疏忽。 Angular并不提供这样的管道,因为它们 表现不佳并防止侵略性缩小。过滤器和 orderBy需要引用对象属性的参数。前 在这个页面中,你了解到这样的管道必须是不纯的 角度调用几乎在每个变化检测周期中都会产生管道。
您应该在服务或组件中对事件进行排序,可能使用Lodash:
之类的内容import * as _ from 'lodash';
this.sortedEvents = _.sortBy(this.events, e => p.startingTime);
然后在你的模板中:
<event-element *ngFor="let event of sortedEvents"></event-element>
答案 1 :(得分:1)
所以这里是工作管道
import {Pipe, PipeTransform} from "@angular/core";
@Pipe({
name: "upcomingToLatest"
})
export class UpcomingToLatestPipe implements PipeTransform{
transform(array: any, fieldName: any): any {
if (array) {
let now: Date = new Date();
array.sort((a: any, b: any) => {
let date1: Date = new Date(a.object[fieldName]);
let date2: Date = new Date(b.object[fieldName]);
// If the first date passed
if(date1 < now){
// If the second date passed
if(date2 < now){
return 0
} else {
return 1
}
} else {
// If the second date passed
if(date2 < now) {
return -1
} else if(date1 < date2) {
return -1
} else if(date1 > date2) {
return 1
} else {
return 0;
}
}
});
}
return array;
}
}
对if
树的快速解释:
如果第一个日期是过去的
1.1如果第二个日期是过去的 - 它们的顺序无关紧要
1.2否则,意味着第二个是将来的第二个日期更高
否则,意味着第一个日期是将来的
2.1如果第二个日期是过去,请按顺序将第一个日期提高
2.2否则,如果第一个日期在第二个日期之前,意味着第一个日期比第二个日期更接近now
,则将第一个日期更高的顺序
2.3否则,意味着第二个日期比第一个日期更接近now
,将第二个日期更高的顺序
答案 2 :(得分:0)
尝试使用此自定义管道
import { Pipe, PipeTransform } from "@angular/core"
@Pipe({
name: 'OrderByUpcomingToLatestPipe '
})
export class OrderByUpcomingToLatestPipe implements PipeTransform {
transform(value: any, args?: any): any {
let newVal = value.sort((a: any, b: any) => {
let date1 = new Date(a.date);
let date2 = new Date(b.date);
if (date1 > date2) {
return 1;
} else if (date1 < date2) {
return -1;
} else {
return 0;
}
});
return newVal;
}
}