Angular4 - 新产品数量(数量)不与之前的数量相加

Question

我在一个电子商务网站工作，在这个网站中，我的购物车中有一些产品，当我添加更多产品时，新数量不会添加到之前的数量中。 就我而言，它总是用新的购物车值(value)替换旧的购物车值(value)..

这是我的服务组件

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';

@Injectable()
export class CartdataService {

  private Count = new BehaviorSubject<number>(0);
  cast = this.Count.asObservable();

  constructor() { }

  editCount(newCount){
  this.Count.next(newCount);
  }

}

这是我的应用程序组件(这里我在页面顶部显示购物车总值(value))

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { DatePipe } from '@angular/common';
import { HostListener } from '@angular/core';
import {CartdataService} from './cartdata.service';


@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']

})

export class AppComponent implements OnInit{
 nCount : number;
  constructor(private CartdataService:CartdataService,private http: HttpClient) { }
 ngOnInit() {
        this.CartdataService.cast.subscribe(totalItems=> this.nCount = totalItems);
}
}

应用程序组件 HTML

<span class='notification-counter badge badge-danger' [class.disabled]="nCount == 0" data-toggle="modal" data-target="#exampleModal">{{nCount}}</span>

这是我的“添加到购物车”屏幕 HTML(此处添加所选产品的产品数量)

<div class="col-sm-9">
              <div class="row">
                <div class="col-sm-3">
                    <input type="text" readonly  class="form-control col-8 text-center bg-white font-weight-bold " id="counterval" value="{{counter}}" #Totalcartval>
                </div>         
                    <a class="btn btn-primary text-white" (click)="decrement()" role="button">
                        <i class="fa fa-minus" style="font-size:15px"></i>
                    </a>
                    <div class="col-sm-1"></div>
                    <a class="btn btn-primary text-white" (click)="increment()"  role="button">
                        <i class="fa fa-plus" style="font-size:15px"></i>
                    </a>            
            </div>
          </div>


 <button type="button"  (click)="sendRecord(Totalcartval.value)" class="btn btn-success" data-toggle="modal" data-target=".bd-example-modal-lg">Add To Cart</button>  

通过单击加号和减号按钮，我可以增加和减少数量，然后单击“添加到购物车”按钮，所选数量将传递到服务文件和数据库

这是我的购物车组件

import { Component,EventEmitter,Output } from '@angular/core';
import { Router } from '@angular/router';
import { HttpClient } from '@angular/common/http';
import { SessionStorageService,SessionStorage } from 'angular-web-storage';
import {CartdataService} from '../cartdata.service';


@Component({
  selector: 'app-my-cart',
  templateUrl: './my-cart.component.html',
  styleUrls: ['./my-cart.component.css'],
  outputs :['ChildEvent']
})

export class MyCartComponent  {
  today = Date.now();
  fixedTimezone =this.today;
  public counter : number = 1;   
  res : string;
  public Count : number;


  imageURL:string ="assets/Product _Details/Show1.png";

    increment(){this.counter += 1;}
    decrement(){if(this.counter >1){this.counter -= 1;}}

    public sendRecord(Totalcartval : number ) {  
      this.CartdataService.editCount(Totalcartval);
      this.http.get('http://freegeoip.net/json/?callback')
                 .subscribe(
                    data => this.saveIP(data['ip'],Totalcartval),
                    error => console.error(error)
                 );
    }
    saveIP(address: string,cartval :number) {
      this.http.get(`http://localhost:57036/api/data/CartCount/?IP_ADDRESS=${address}&ITEM_QTY=${cartval}&TIME=${this.fixedTimezone}`)
               .subscribe(data => this.res  = (data['ITEM_QTY']),
               error => console.error(error));       
  } 
 ngOnInit() {}

}

这里我无法将之前选择的产品的数量与新选择的产品的数量相加。请帮我解决这个问题。 谢谢。

Answer 1

您的代码有一些问题，因此我没有指出它们，而是将您的代码添加到 stackblitz 并修复了它们。

查看here .

第一个主要问题是:

public sendRecord(Totalcartval : number ) {
  this.CartdataService.editCount(Totalcartval);
...

我改成这样:

public sendRecord() {  
  this._cartDataService.editCount(this.counter);
...

#Totalcartval 将从模板作为字符串传递。不需要这个模板变量，因为您已经将计数存储在 this.counter 中，因此使用起来更容易。

@David 的评论中指出了另一个主要问题 - 您总是传递新的总计，而不是跟踪现有的(之前的)总计。通过按照 David 的建议更改服务解决了这个问题:

  editCount(newCount: number){
    this.currentCount += newCount; 
    this.Count.next(this.currentCount);
  }

仅供引用，我无法在 stackblitz 中加载 font-awesome，因此只需用 + 和 - 替换图标