Ngrx

Question

假设我有一个接口

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

和减速器系统。在我的组件中，我可以制作 Observer

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 以计算所有这些元素并放置一个 badge 如下图所示：

尝试了很多方法，但我无法映射、过滤，而且我不知道我到底需要做什么才能观察到这些项目。抱歉，我是 ngrx 的新手以及 JS 中的所有可观察模式- 打字稿。谢谢。

编辑：我的减速器：

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>

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

Ngrx - Observe some elements inside store

rxjs

typescript

angular

ngrx-store