1

假设我有一个界面

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的通知，以计算所有这些元素并放置如下图所示的徽章： 在此处输入图像描述

尝试了很多方法，但我无法映射、过滤，而且我不知道我究竟要做什么才能观察这些项目。抱歉，我是 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;
    }
}

我的应用状态：

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

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

我的 Ng 模块：

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>
4

1 回答 1

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>
于 2018-06-12T13:33:51.383 回答