时间戳

首页 > 解决方案 > Angular - 在我的模板上显示来自购物车项目（电子商务）Rxjs 的当前长度值

angular - Angular - 在我的模板上显示来自购物车项目（电子商务）Rxjs 的当前长度值

问题描述

我试着为我的购物车的商品编号做一个计数器。我将使用 Angular 9 在我的主页中显示这个计数器。

一个函数从我的购物车返回当前的商品数量，我的模板通过一个属性显示我的函数的值。使用 Observables，我认为该属性会显示我购物车中物品的当前价值，而无需重新加载页面，但这不会像那样发生。我之前忘了做什么？

代码.ts

import { Observable, of } from 'rxjs';


constructor() { 

      this.NumItemsCart().subscribe(
      value =>  {this.num_item = value},
      error => console.log('was an issue here', error),
      ()=> console.info('Obs completed')
    )
  }

  NumItemsCart():Observable<number>{
    let string_items = '';
    let array_temp = [];
    let num_items=0;
    
    string_items = localStorage.getItem('ecmm_list_shopcart');

    array_temp= string_items.split(',')
    
    num_items= array_temp.length -1

    return of(num_items)
  }

代码模板

<mat-toolbar>
    <div *ngIf="(num_item) > 0">{{num_item}}</div>
</mat-toolbar>

标签： angularrxjsobservable

解决方案

您确实在创建一个 observable，但您并没有进行轮询（localStorage定期检查您的）。

您可以执行以下操作：

import {
  interval
} from 'rxjs';
import {
  map
} from 'rxjs/operators';

constructor() {

  const storage$ = interval(1000).pipe( // This will try to update every second
    map(() => {
      let string_items = '';
      let array_temp = [];
      let num_items = 0;

      string_items = localStorage.getItem('ecmm_list_shopcart');

      array_temp = string_items.split(',')

      num_items = array_temp.length - 1
      return num_items;
    })
  )
  storage$.subscribe(
    value => {
      this.num_item = value
    },
    error => console.log('was an issue here', error),
    () => console.info('Obs completed')
  )
}

您可以在代码中改进其他几点，但这应该已经解除了您的障碍。

推荐阅读