Question

我正在一个电子商务网站工作，在这里，当我添加更多产品时，我的购物车中有一定数量的产品，新数量未添加到之前的计数中。在我的情况下，它总是用新的购物车价值替换旧的购物车价值..

这是我的服务组件

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);
  }

}

这是我的应用程序组件（此处我在页面顶部显示总购物车价值）

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在评论中发现了另一个主要问题 - 您总是通过NEW TOTAL而不是跟踪现有（之前）的总数。根据大卫的建议改变服务来解决这个问题：

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

仅供参考我无法在stackblitz中加载font-awesome，所以只需用+和 -

替换图标

Angular4 - 新产品数量（数量）不会与之前的数量相加

1 个答案: