Angular/RXJS，如何根据特定字符串值对对象的可观察数组进行排序？

Question

我有一个有趣的问题(我认为)，希望得到一些帮助。

我返回一个基于值过滤的 Observable[DisplayCard[]]。这一切都很好。在我根据一个值过滤该数组后，我现在想按另一个名为 category 的值对返回的数组进行排序。 category 只能是三个字符串值之一:ONGOING、UPCOMING 和 PAST。

我想返回一个排序如下的数组: 正在进行 --> 即将到来 --> 过去。所以，所有有“正在进行”的显示卡都会在前面，在没有更多的显示卡之后，我想要所有“即将到来”的卡，然后在那些之后，我想要所有的“过去”卡显示。

这是我的代码:

displayCommunityCards$ = this.cardService.displayCards$
    .pipe(
      map(communityEventsCards => communityEventsCards.filter(community => community.type === 'COMMUNITY EVENT')
        .sort((a, b) => {
          return ???
        }),
      tap(data => console.log('Community Cards: ', JSON.stringify(data))),
    );

Answer 1

您可以通过创建一个枚举来表示 CardCategory 的所有可能值来实现此目的。并使用 Record<CardCategory, number> 定义它们应该排序的顺序:

export enum CardCategory {
  OnGoing  = 'ONGOING',
  Upcoming = 'UPCOMING',
  Past     = 'PAST',
}

export const CategorySortOrder: Record<CardCategory, number> = {
  'ONGOING'  : 0,
  'UPCOMING' : 1,
  'PAST'     : 2
}

然后创建一个使用它进行排序的排序函数:

function sortByCardCategory(a: DisplayCard, b: DisplayCard) {  
  if(a.category === b.category) return 0;
  return CategorySortOrder[a.category] > CategorySortOrder[b.category] ? 1 : -1;
}

您现在可以像这样轻松排序:

displayCommunityCards$ = this.cardService.displayCards$.pipe(
  map(cards => cards
    .filter(c => c.type === CardType.CommunityEvent)
    .sort(sortByCardCategory)
  )
);

这是一个有效的 StackBlitz演示。

---

使用 Record type 不是完全必要的，但它确实保证您为 CardCategory 的所有值定义排序顺序.例如，如果您添加了一个新的 CardCategory , typescript 会抛出一个关于 CategorySortOrder 的错误。未定义 CardCategory 的所有值.

Property 'MYNEWCAT' is missing in type
'{ 
  UPCOMING: number; 
  ONGOING: number; 
  PAST: number; 
}' 
but required in type 'Record<CardCategory, number>'. (2741)