Angular/RXJS，如何根據特定字串值對Observable物件陣列進行排序？

我有一個有趣的問題（我認為）并且希望得到一些幫助。

我正在回傳一個基于值過濾的 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))),
    );

uj5u.com熱心網友回復：

您可以通過創建三個陣列并按順序合并它們來簡單地做到這一點。它可以在 O(n) 中完成。

const upcoming = [],
      past = [],
      ongoing = [];
      
const events = [{event: "upcoming", id: 1}, {event: "upcoming", id: 2}, {event: "past", id: 3}, {event: "past", id: 4}, {event: "ongoing", id: 5}];

events.forEach(el => {
   el.event === "upcoming" ? upcoming.push(el) : 
   el.event === "past" ? past.push(el) :
   el.event === "ongoing" ? ongoing.push(el) : false;
});

console.log([...ongoing, ...upcoming, ...past]);

在上面的代碼片段中，使用的記憶體會更多。

我想回傳一個排序如下的陣列：正在進行 --> 即將到來 --> 過去。所以，所有帶有“正在進行”的顯示卡將在前面，在沒有更多顯示卡之后，我想要所有“即將到來”的卡，然后在那些之后，我想要顯示所有的“過去”卡。

另一種有趣的方式可能是在物件中創建具有“正在進行”、“即將到來”和“過去”的鍵。您可以為每個創建一個陣列作為值，并在找到后推送內容。您需要檢查何時開始顯示即將發生的事件以及何時開始過去。

 const result = {
          upcoming: [],
          past: [],
          ongoing: [] 
 }
          
    const events = [{event: "upcoming", id: 1}, {event: "upcoming", id: 2}, {event: "past", id: 3}, {event: "past", id: 4}, {event: "ongoing", id: 5}];

    events.forEach(el => {
       el.event === "upcoming" ? result.upcoming.push(el) : 
       el.event === "past" ? result.past.push(el) :
       el.event === "ongoing" ? result.ongoing.push(el) : false;
    });

 console.log(result);

完成后，只需拿起鑰匙并將資料扔到視圖中即可。

uj5u.com熱心網友回復：

雖然其他答案有效，但您不需要創建多個陣列甚至訂閱來實作這一點。您總是最好在模板中使用異步管道并提供排序功能以用于異步管道的結果。

本例中使用的列舉和介面：

enum Cat {
  ONGOING = 'ONGOING',
  UPCOMING = 'UPCOMING',
  PAST = 'PAST',
}

interface DisplayCommunityCards {
  category: Cat;
  type: string;
}

在您的組件中：

cards$ = of([
  { category: Cat.ONGOING, type: 'COMMUNITY EVENT' },
  { category: Cat.PAST, type: 'COMMUNITY EVENT' },
  { category: Cat.PAST, type: 'COMMUNITY EVENT' },
  { category: Cat.UPCOMING, type: 'COMMUNITY EVENT' },
]);

displayCommunityCards$ = this.cards$.pipe(
  map((communityEventsCards) =>
    communityEventsCards.filter(
      (community) => community.type === 'COMMUNITY EVENT'
    )
  )
);

sort(
  displayCommunityCards: DisplayCommunityCards[]
): DisplayCommunityCards[] {
  const catOrder = Object.values(Cat);
  return displayCommunityCards.sort((a, b) => {
    return catOrder.indexOf(a.category) - catOrder.indexOf(b.category);
  });
}

（cards$ 只是您從服務中獲得的 observable 的替代品。）

在您的模板中：

<p *ngFor="let c of sort(displayCommunityCards$ | async)" >
  {{ c.category }}
</p>

通過這樣做，您將不必擔心在 onDestroy 中取消訂閱，并且您可以使用 OnPush ChangeDetectionStrategy。

這里有一個關于

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

標籤：有角的 打字稿 rxjs rxjs6 rxjs-observables

上一篇：如何優化從O(n^2)到O(n)或類似的嵌套for回圈的打字稿？

下一篇：如何在單個組件中使用多個路由器插座