GroupBy for Observable

问题:

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.

the groups are:

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

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?

回答1:

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 discourages the user of filtering pipes for performance reasons.