Question

我有一个课程表，我想按日期订购。由于Angular 5没有orderBy管道，到目前为止我找到的所有解决方案只能应用于数字和字符串，如果有人能帮助我，我将不胜感激。这是我表的主体

<tbody>
  <tr *ngFor="let lesson of lessons">
    <th scope="row">{{lesson.date | date:'dd.MM.yyyy H:mm'}}</th>
    <td>{{lesson.address.locationName}}</td>
    <td>{{lesson.topic}}</td>
    <td>{{lesson.homework}}</td>     
  </tr>
</tbody>

这是我的component.ts文件的片段

public lessons = [];

ngOnInit() {
this.localStorage.getItem<number>('selectedProfileId').subscribe((id) => {
     this._profileService.showLessons(id)
     .subscribe(data => this.lessons = data,
     );
   });     
 }

Answer 1

在订阅/绑定lessons之前，在组件类中使用Array.prototype.sort()对lessons进行排序。以下是在按照降序使用RxJS运算符lessons进行绑定之前，您可以如何对服务中的map()进行排序。 map()在subscribe()之前转换数据流方面非常强大。

this._profileService.showLessons(id)
    .pipe(
        map(lessons => lessons.sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime()))
    )
    .subscribe(lessons => this.lessons = lessons);

根据您的TsLint设置/配置，您可能需要使用getTime()来安抚编译器：

lessons.sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime())

以下是显示基本功能的StackBlitz。

注意* - pipe()正在使用 RxJS 5.5 + 。如果您使用的是旧版本的RxJS，则只需直接导入map()并按如下方式使用它：

this._profileService.showLessons(id)
    .map(lessons => lessons.sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime()))
    .subscribe(lessons => this.lessons = lessons);

希望这有帮助！

谢谢！

Answer 2

getTriLots(){
  return this.lots.sort((a,b) =>  new Date(b.date_used).getTime() - new Date(a.date_used).getTime())
}

Angular 5按日期排序

2 个答案: