Question

我正在Angular 4电子商务网站工作，在此我想用之前的购物车数量添加商品数量。

假设我的购物车中有5件商品，现在我又添加了5件商品，现在购物车数量应显示为10件。

我怎样才能做到这一点。

这是我写的代码。

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  {
    public counter : number = 1;   

    constructor(private CartdataService :CartdataService,private 
        router:Router,private http: HttpClient) {
            this.router.events.subscribe(() => window.scrollTo(0, 0));
    }

    increment() { 
        this.counter += 1;
    }

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

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

这里我将购物车数量发送给服务。在发送购物车价值之前，我想添加现有购物车数量+新增产品数量。指导我实现这个目标

这是我的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>

Answer 1

您可以执行类似于Observable服务以及在您的组件中使用该服务的操作。

cart.service.ts

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

@Injectable()
export class CartService {
    private totalItems: BehaviorSubject<number> = new BehaviorSubject<number>(0);

    getCartItems() {
        return this.totalItems.asObservable();
    }

    updateCartItems(items: number) {
        this.totalItems.next(items);
    }
}

然后在您的组件中使用它

cart.component.ts

import {Component, OnInit } from '@angular/core';

import {CartService} from './cart.service';

@Component({
    selector: 'cart-component',
    template: `
        <div>
        <input type="number" readonly [(ngModel)]="total"/>
        </div>
        <button (click)="increase()">Increase</button>
        <button (click)="decrease()">Decrease</button>
    `
})
export class CartComponent {

    total;

    constructor(private cartService:CartService) {
    }

    increase() {
        this.cartService.updateCartItems(this.total+1);
    }

    decrease() {
        this.cartService.updateCartItems(this.total-1);
    }

    ngOnInit() {
        this.cartService.getCartItems()
            .subscribe(value => {
                this.total = value;
            })
    }
}

Angular 4 - 如何使用现有购物车数量

1 个答案: