angular - 如何使用angular2根据日期按降序对数据进行排序
问题描述
我有一组数据显示。这里的日期没有按顺序排列。我希望数据根据日期按降序排列。
HTML:
<mat-tab label="Active">
<mat-icon for="search">search</mat-icon>
<input type="search" [(ngModel)]="filter" name="search" class="search" placeholder="Company">
<ul>
<li *ngFor="let message of activeMessages| messagefilter: filter" (click)="showMessage(message)" [class.activeShow]="message.id == message_id">
<span>{{message.messages[message.messages.length -1].updated_at | date:'dd.MM.yyyy'}}</span>
<img style="width: 40px;" [src]="message.from_user_image || '../assets/images/msg.png'"/>
<p style="padding-top: 16px;display: inline;">{{message.from_user_name}}</p>
<p style="padding-top: 10px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;"><b>{{message.messages[message.messages.length -1].text}}</b></p>
</li>
</ul>
</mat-tab>
TS:
loadMessages() {
this.service
.getMessages()
.subscribe(
data => {
this.messagesdata = data;
this.activeMessages = data.filter(msg => msg.active == true && msg.from_user_name !== 'Anonymus' && msg.messages.length > 0)
this.closedMessages = data.filter(msg => msg.active == false && msg.from_user_name !== 'Anonymus' && msg.messages.length > 0);
},error => {});
}
这里我获取的日期来自数据内的消息数组。那么,谁能帮我解决这个问题
解决方案
你可以做这样的事情,
你可以this.activeMessages
在updated date
里面排序last message
您的 TS 将变为:
loadMessages() {
this.service
.getMessages()
.subscribe(
data => {
this.messagesdata = data;
this.activeMessages = data.filter(msg => msg.active == true && msg.from_user_name !== 'Anonymus' && msg.messages.length > 0)
this.activeMessages = this.activeMessages.sort((a: any, b: any) => new Date(b.messages[b.messages.length -1].updated_at).getTime() - new Date(a.messages[a.messages.length -1].updated_at).getTime()
this.closedMessages = data.filter(msg => msg.active == false && msg.from_user_name !== 'Anonymus' && msg.messages.length > 0);
},error => {});
}
您的 HTML:
<mat-tab label="Active">
<mat-icon for="search">search</mat-icon>
<input type="search" [(ngModel)]="filter" name="search" class="search" placeholder="Company">
<ul>
<li *ngFor="let message of activeMessages| messagefilter: filter" (click)="showMessage(message)" [class.activeShow]="message.id == message_id">
<span>{{message.messages[message.messages.length -1].updated_at | date:'dd.MM.yyyy'}}</span>
<img style="width: 40px;" [src]="message.from_user_image || '../assets/images/msg.png'"/>
<p style="padding-top: 16px;display: inline;">{{message.from_user_name}}</p>
<p style="padding-top: 10px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;"><b>{{message.messages[message.messages.length -1].text}}</b></p>
</li>
</ul>
</mat-tab>
推荐阅读
- deployment - 在 SFDX 中使用 package.xml 检索页面布局分配
- spring-boot - 如何对 Spring Boot Webflux Restful API 进行输入验证
- django - 带有 OuterRef 的嵌套注释 django
- javascript - offsetHeight、clientHeight 和 scrollHeight 或 offsetWidth、clientWidth 和 scrollWidth 为 Mackbook 视网膜显示返回错误值
- android - 为什么 AppBar 会在我的应用栏背景中添加正方形
- python - 如何在雪花中只保留唯一的行?
- typescript - 在 serenity-platform 中使用第三方 api
- google-apps-script - 如何使用谷歌应用程序脚本获取特定用户拥有的电子表格/文档?
- python - 字符串数组之一未排序
- python - 如何使用 python dpkt 库计算有效负载大小