Ngrx - 观察商店内的一些元素

Question

假设我有一个界面

export interface INotification {
    id: number;
    DateReceived: number;
    Title: string;
    Message: string;
    Tipology: string;
    isRead: number;
}

和减速机系统。在我的组件中我可以制作和观察者

public notifications: Observable<INotification[]>;
constructor(private store: Store<AppState>) {
   this.notifications = this.store.select<any>('notifications');
}

如果我的意图只是在页面中显示元素，那就没关系了。

<div *ngFor="let notification of notifications | async">
     <div class="centralItem">
       <p>
         <b>{{notification.Title}}
         </b>
       </p>
       <div [innerHtml]="notification.Message">
       </div>
     </div>
</div>

问题：我想观察我商店中 isRead 等于 0 <的所有通知 / strong>计算所有这些元素并添加徽章，如下图所示：

尝试了很多方法，但我无法映射，过滤，我不知道我要做什么来观察这些项目..对不起我是新的ngrx和JS中的所有可观察模式 - Typescript 。 感谢。

编辑：我的减速机：

import { Action } from '@ngrx/store'
import { INotification } from './../models/notification.model'
import * as NotificationActions from './../actions/notification.actions'


export function reducer(state: INotification[] = [], action: NotificationActions.Actions) {
    console.log(action);
    switch (action.type) {
        case NotificationActions.ADD_NOTIFICATION:
            return [...state, action.payload].sort(compare);
        case NotificationActions.REMOVE_NOTIFICATION:
            state.splice(action.payload, 1).sort(compare);
            return state;
        case NotificationActions.REMOVE_NOTIFICATIONS_BY_TIPOLOGY:
            return state.map(val => val.Tipology != action.payload).sort(compare);
        default:
            return state.sort(compare);
    }

    function compare(a, b) {
        const aDate = a.DateReceived;
        const bDate = b.DateReceived;

        let comparison = 0;
        if (aDate > bDate) {
            comparison = -1;
        } else if (aDate < bDate) {
            comparison = 1;
        }
        return comparison;
    }
}

我的AppState：

import { INotification } from '../models/notification.model';

export interface AppState {
    readonly notification: INotification[];
}

我的NgModule：

NgModule({
  declarations: [
    MyApp,
    AuthLoader
  ],
  imports: [
    BrowserModule,
    HttpModule,
    IonicModule.forRoot(MyApp),
    StoreModule.forRoot({ notifications: reducer })
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    AuthLoader
  ],
  providers: [
    StatusBar,
    SplashScreen,
    { provide: ErrorHandler, useClass: IonicErrorHandler }
  ]
})

解决： 到目前为止，我能做到的最好是：

    public counter = 0;
     ngOnInit() {
        this.notifications.subscribe((notifs) => {
        this.counter = 0;
          notifs.forEach(elem => {
            if (elem.isRead == 0)
              this.counter++;
          });
        });
      }

看起来有点脏，但是可以使用XD

<ion-badge item-end *ngIf='counter > 0'>{{counter}}</ion-badge>

Answer 1

在notificationsObservable上添加订阅，如：

public hasNotifications: boolean;
ngOnInit() {
   this.notifications.subscribe( notifs => {
      this.hasNotifications = notifs.some( el => !el.isRead);
   });
}

然后在你的元素上使用它，它应该有一个徽章（基本的html可能不能反映你的情况，但只是为了解释......）：

<div class="badge-holder">
  <span *ngIf="hasNotification">MyBadge</span>
</div>