Ngrx - Соблюдайте некоторые элементы в магазине - PullRequest
Новая
       35

Ngrx - Соблюдайте некоторые элементы в магазине

0 голосов
/ 12 июня 2018

Предположим, у меня есть интерфейс 

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 , чтобы подсчитать все эти элементы и поставить значок как на изображении ниже: enter image description here

Пробовал много способов, но я не могу отобразить, отфильтровать, и я не знаю, что именно я должен делатьнаблюдать за этими пунктами .. извините, я новичок в 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>

1 Ответ

0 голосов
/ 12 июня 2018

Добавьте подписку на 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>
...