Question

在Angular 6中使用ngx-pipes是否可以对groupBy排序？例如，我有一个任务列表。我可以按天对任务进行分组并按升序显示。但是如何按降序显示任务？

<div class="row" *ngFor="let task of tasks | groupBy: 'startDate' | pairs">
    <div>Group name: {{task[0]}}</div>
    <div class="row" *ngFor="let t of task[1]">
        <div>Task: {{t.name}}</div>
    </div>
</div>

Answer 1

使用Angular 键值管道代替ngx 对，然后使用orderBy

<div class="row" *ngFor="let task of tasks | groupBy: 'startDate' | keyvalue | orderBy">
    <div>Group name: {{task.key}}</div>
    <div class="row" *ngFor="let t of task.value">
        <div>Task: {{t.name}}</div>
    </div>
</div>

Answer 2

只需使用反向管道以降序显示任务即可。

<div class="row" *ngFor="let task of tasks | groupBy: 'startDate' | pairs | reverse">
    <div>Group name: {{task[0]}}</div>
    <div class="row" *ngFor="let t of task[1]">
        <div>Task: {{t.name}}</div>
    </div>
</div>

使用Angular ngx管道对GroupBy排序

2 个答案: