如何将过滤器应用于 Observable 并获取列表的长度以计算每个用户的通知

Question

如何将过滤器应用于 Observable 并获取列表的长度以计算每个用户的通知：如何通过以下方式获取每个用户的通知类型编号 html代码

<div class="users-list-body">
  <div>
    <h5>
      {{ onlineusermodel.userName }}
    </h5>
    <p>It seems logical that the</p>
  </div>
  <div class="last-chat-time">
    <small class="text-muted">05 min</small>
    <div class="new-message-count">
      {{ getUserNotification(onlineusermodel) }}
    </div>
  </div>
</div>

组件 ts

getUserNotification(onlineUserModel: OnlineUserModel): Number {
 // var count = this.allNotifications$.subscribe((n) =>
 //   n.filter((u) => u.onlineUserModel == onlineUserModel).length
 // );
 var count = this.store
   .pipe(select(selectDirectNotifications))
   .subscribe(
     (n) => n.filter((u) => u.onlineUserModel == onlineUserModel).length
   );

 return count;
}

减速器

const directMessagesReducerInternal = createReducer(
 initialState,
 on(
   directMessagesAction.receivedNotificationForUserAction,
   (state, { payload }) => {
     const directNotification: DirectNotification = {
       onlineUserModel: payload.onlineUserModel,
       notificationModel: payload.notificationModel,
     };
     return {
       ...state,
       allNotifications: [...state.allNotifications, directNotification],
     };
   }
 ),

状态

allNotifications: DirectNotification[];

选择器

export const selectDirectNotifications = createSelector(
 selectDirectMessageStore,
 (state: DirectMessagesState) => state.allNotifications
);

动作

export const receivedNotificationForUserAction = createAction(
 "[DN] RECEIVED_DIRECT_NOTIFICATION",
 props<{ payload: ReceivedNotificationForUserDto }>()
);

Answer 1

不推荐的方式：您可以通过返回 Observable 而不是从 getUserNotification 订阅它来实现，然后在模板中订阅它使用 async 管道，如下所示：

getUserNotification(onlineUserModel: OnlineUserModel): Observable<number> {
  return this.store.pipe(
    select(selectDirectNotifications),
    map((n) => n.filter((u) => u.onlineUserModel == onlineUserModel).length)
  );
}

<div class="users-list-body">
  <div>
    <h5>
      {{ onlineusermodel.userName }}
    </h5>
    <p>It seems logical that the</p>
  </div>
  <div class="last-chat-time">
    <small class="text-muted">05 min</small>
    <div class="new-message-count">
      {{ getUserNotification(onlineusermodel) | async }}
    </div>
  </div>
</div>

但是不建议直接在组件模板（HTML文件）中使用函数，因为Angular会在每次更改时调用它检测，从性能的角度来看，这不是首选。

相反，推荐的方法是在数据准备好后将getUserNotification的值分配给Observable，然后订阅该Observable在组件模板中，像下面这样：

ngOnInit(): void {
  // ngOnInit is used here as an example.
  // You can assing the result of `getUserNotification` function each time the `onlineUserModel` has been changed:
  this.userNotificationCount$ = this.getUserNotification(onlineUserModel);
}

getUserNotification(onlineUserModel: OnlineUserModel): Observable<number> {
  return this.store.pipe(
    select(selectDirectNotifications),
    map((n) => n.filter((u) => u.onlineUserModel == onlineUserModel).length)
  );
}

<div class="users-list-body">
  <div>
    <h5>
      {{ onlineusermodel.userName }}
    </h5>
    <p>It seems logical that the</p>
  </div>
  <div class="last-chat-time">
    <small class="text-muted">05 min</small>
    <div class="new-message-count">
      {{ userNotificationCount | async }}
    </div>
  </div>
</div>

如何将过滤器应用于 Observable 并获取列表的长度以计算每个用户的通知

How Applay Filter to Observable and get the length of list to count notification for each user

observable

rxjs

ngrx

angular