Angular Organize mat-list by date答案

【问题标题】：Angular Organize mat-list by dateAngular Organize mat-list by date
【发布时间】：2023-03-17 06:25:01
【问题描述】：

我使用 Angular Cli 6。我有来自多个服务的多个数据，我想在同一页面上一起显示这些数据。我想通过增加日期来显示不同的 div。

我所有的服务都以同样的方式工作：

<mat-card-content>
    <mat-list *ngFor="let examenToDisplay  of examensToDisplay | async">
        <mat-list><mark><strong>{{ examenToDisplay?.dateexamen | date:' d/MM/y'}}</strong></mark> </mat-list>
        <mat-list *ngIf="examenToDisplay.typeexamen"> Examen : <strong>{{ examenToDisplay?.typeexamen }}</strong> </mat-list>
        <mat-list  *ngIf="examenToDisplay.commentaires">Conclusion :  <strong>{{ examenToDisplay?.commentaires }}  </strong> </mat-list>
    </mat-list>
</mat-card-content>

我还有另外三张标记卡。我如何过滤这三个？谢谢

【问题讨论】：

可以肯定的是，你想要的是：按日期显示examensToDisplay order的项目？
examensToDisplay 是要显示的块之一。我有 DiagnosticToDisplay、TreatementToDisplay……所有的集团都有一个日期。我想按日期显示所有数据。有可能的？谢谢

标签： angular date filter

【解决方案1】：

您的内容有很多按日期排序的可能性。

如果您有自己的后台服务器，您可以通过一些查询直接按日期订购。
在您的 service.ts 或 component.ts 中，您可以在使用自定义排序获取数据时按日期排序（请参阅here）
在您的 HTML 中，您可以使用自定义 orderBy 管道 (example)。

要正确管理您的日期，您可以使用包Moment

【讨论】：

我认为我对第三种解决方案很感兴趣，但如果你有很多 datastoDisplay 是可能的？
对于每个 *ngFor，您将拥有 *ngFor="let item of myListToDisplay| myCustomSortPipe"