Удалить значения из Observable - PullRequest
Новая
       2

Удалить значения из Observable

0 голосов
/ 22 февраля 2020

У меня есть приложение электронной коммерции Angular, в котором у меня есть общий компонент с именем HeaderComponent, а внутри этого компонента у меня есть компонент с именем ShoppingWidgetsComponent. Я позвонил ShoppingWidgetsComponent внутри HeaderComponent, чтобы показать количество товаров в корзине в заголовке, как это

header.component.ts : 

<div class="main-menu-wrapper-2" fxLayout="row" fxLayoutAlign="space-between center">
  <mat-toolbar class="top-navbar top menu">
    <app-shopping-widgets [shoppingCartItems]="shoppingCartItems"></app-shopping-widgets>
  </mat-toolbar>
</div>

header.component.ts : 

constructor(private cartService: CartService) {
  this.cartService.getItems().subscribe(shoppingCartItems => this.shoppingCartItems = 
  shoppingCartItems);
}

cart.service.ts : 

public cartItems: BehaviorSubject<CartItem[]> = new BehaviorSubject([]);

public getItems(): Observable<CartItem[]> {
  const itemsStream = new Observable(observer => {
    observer.next(products);
    observer.complete();
  });
  return <Observable<CartItem[]>>itemsStream;
}

shopping-widgets.component. html: 

<button mat-button class="flex-row-button mat-button" fxLayoutAlign="space-between center" [matMenuTriggerFor]="menu">
  <div class="mat-button-wrapper">
    <div class="">
      <mat-icon class="mat-icon-lg mat-icon material-icons">local_grocery_store</mat-icon>
      <span class="cart-count-wrapper">{{ shoppingCartItems.length }}</span>
    </div>
    <div class="top-cart">
      <span>{{ getTotal() | async | currency:productService?.currency:'symbol' }}</span>
    </div>
  </div>
</button>

shopping-widgets.component.ts : 

@Input() shoppingCartItems: CartItem[] = [];

Теперь я хочу сбросить cartItems BehaviourSubject так что cartItems count должен снова отображать 0 внутри shopping.component.html

Как мне этого добиться?

1 Ответ

0 голосов
/ 22 февраля 2020

Пока вы храните состояние вне субъекта и контролируете управление состоянием через интерфейс службы - в отличие от раскрытия самого субъекта - тогда это должно быть довольно просто

cart.service.ts 

private cartItems: CartItem[] = [];
private cartItems$: Subject<CartItem[]> = 
  new BehaviorSubject<CartItem[]>(this.cartItems.slice());

getItems(): Observable<CartItem[]> {
  // hide subject implementation from observers
  return this.cartItems$.asObservable();
}

addItem(cartItem: CartItem): void {
  this.cartItems.push(cartItem);
  this.onUpdate();
}

removeItem(cartItem: CartItem): void {
  const index = this.cartItems.indexOf(cartItem);
  if (index === -1) {
    remove;
  }

  this.cartItems.splice(index, 1);
  this.onUpdate();
}

private onUpdate(): void {
  this.cartItems$.next(this.cartItems.slice());
}

Копия массива элементов всегда возвращается поздним подписчикам. Элементы добавляются и удаляются через интерфейс сервиса. Подписчики получают обновления, когда элементы добавляются или удаляются.

Я разрезаю массив, чтобы гарантировать, что массив службы не может быть изменен вне службы. Это не защитит сами элементы корзины от изменения.

...