GroupBy for Observable< todo []> [英] GroupBy for Observable<todo[]>

问题描述

我正在我的角度应用程序（离子框架）中从firestore检索待办事项列表。返回的列表是一个Observable列表，我使用异步管道在我的模板中显示列表。
这个todo项目列表有截止日期，我想在其上进行一些自定义分组，以便在我的todolist应用程序中显示组标题。

I'm retrieving a flat list of todo items from firestore in my angular app (ionic framework). The returned list is an Observable list and I'm using the async pipe to show the list in my template. This list of todo items has a due date, and I would like to do some custom grouping on it for displaying with group headers in my todolist app.

这些团体是：

overdue (duedate < today)
today (duedate == today)
later (duedate > today)

我正在尝试在视图中使用一些魔法ngFor和ngIf，但感觉不对。我也在阅读有关RxJS的GroupBy，但可以提供其他建议或帮助。自定义管道？

I'm experimenting with doing it in the view with some magic ngFor and ngIf, but it feels wrong. I'm also reading about GroupBy with RxJS, but open for other suggestions or help. Custom pipe?

推荐答案

只需使用不同的可观察量，就没有理由让它变得过于复杂。

Just use different observables for that, there's no reason to make it overly complicated.

const items$ = /* … */;

const overdueItems$ = items$.filter(item => …);
const todayItems$ = items$.filter(item => …);
const laterItems$ = items$.filter(item => …);

自定义管道？

Custom pipe?

出于性能原因，Angular不鼓励用户过滤管道。

Angular discourages the user of filtering pipes for performance reasons.

这篇关于GroupBy for Observable< todo []>的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！