这个得上一篇:https://ithelp.ithome.com.tw/articles/10258532
这里要来写减少和移除:
从 cart-details.component.html档案.增加
<button (click)="decrementQuantity(tempCartItem)" class="btn btn-primary btn-sm">
再到 cart-details.component.ts档案.增加方法:
选方法:
mport { CartService } from 'src/app/services/cart.service';
import { Component, OnInit } from '@angular/core';
import { CartItem } from 'src/app/common/cart-item';
@Component({
selector: 'app-cart-details',
templateUrl: './cart-details.component.html',
styleUrls: ['./cart-details.component.css']
})
export class CartDetailsComponent implements OnInit {
cartItems: CartItem[]=[];
totalPrice: number =0;
totalQuantity: number =0;
constructor(private cartService:CartService ) { }
ngOnInit(): void {
this.listCartDetails();
}
listCartDetails() {
this.cartItems = this.cartService.cartItems;
this.cartService.totalPrice.subscribe(
data => this.totalPrice = data
);
this.cartService.totalQuantity.subscribe(
data => this.totalQuantity = data
);
this.cartService.computeCartTotals();
}
incrementQuantity(theCartItem: CartItem){
this.cartService.addToCart(theCartItem);
}
decrementQuantity(theCartItem: CartItem){
this.cartService.decrementQuantity(theCartItem);
}
}
再到 cart.service.ts档案
剪下这里:
移到最下面:
然後开始改写程序码:
再新增方法
修改程序码:
import { CartItem } from './../common/cart-item';
import { Injectable } from '@angular/core';
import { Subject } from 'rxjs';
@Injectable({
providedIn: 'root'
})
export class CartService {
cartItems: CartItem[]=[];
totalPrice: Subject<number> = new Subject<number>();
totalQuantity: Subject<number> = new Subject<number>();
constructor() { }
addToCart(theCartItem:CartItem){
let alreadyExistsInCart : boolean = false;
let existingCartItem: CartItem = undefined;
if (this.cartItems.length>0){
existingCartItem = this.cartItems.find( tempCartItem => tempCartItem.id === theCartItem.id);
alreadyExistsInCart =(existingCartItem != undefined);
}
if (alreadyExistsInCart){
existingCartItem.quantity++;
}
else{
this.cartItems.push(theCartItem);
}
this.computeCartTotals();
}
computeCartTotals() {
let totalPriceValue: number =0;
let totalQuantityValue: number =0;
for(let currentCartItem of this.cartItems){
totalPriceValue += currentCartItem.quantity * currentCartItem.unitPrice;
totalQuantityValue += currentCartItem.quantity;
}
this.totalPrice.next(totalPriceValue);
this.totalQuantity.next(totalQuantityValue);
this.logCartData(totalPriceValue, totalQuantityValue);
}
logCartData(totalPriceValue: number, totalQuantityValue: number) {
console.log('Contents of the cart');
for (let tempCartItem of this.cartItems){
const subTotalPrice = tempCartItem.quantity * tempCartItem.unitPrice;
console.log(`name: ${tempCartItem.name}, quantity=${tempCartItem.quantity},unitPrice=${tempCartItem.unitPrice},subTotalPrice=${subTotalPrice}`);
}
console.log(`totalPrice: ${totalPriceValue.toFixed(2)}, totalQuantity: ${totalQuantityValue}`);
console.log('----');
}
decrementQuantity(theCartItem: CartItem) {
theCartItem.quantity--;
if (theCartItem.quantity === 0){
this.remove(theCartItem);
}
else{
this.computeCartTotals();
}
}
remove(theCartItem: CartItem) {
const itemIndex = this.cartItems.findIndex( tempCartItem => tempCartItem.id === theCartItem.id);
if (itemIndex >-1) {
this.cartItems.splice(itemIndex,1);
this.computeCartTotals();
}
}
}
到购物车发现按-会变少
再到 cart-details.component.html档案.增加REMOVE按钮:
建立会作动的语法:
<div class="main-content">
<div class="section-content section-content-p30">
<div class="container-fluid">
<div *ngIf="cartItems.length > 0">
<table class="table table-bordered">
<tr>
<th width="20%">Product Image</th>
<th width="50%">Product Detail</th>
<th width="30%"></th>
</tr>
<tr *ngFor="let tempCartItem of cartItems">
<td>
<img src="{{ tempCartItem.imageUrl }}" class="img-responsive" width="150px" />
</td>
<td>
<p>{{ tempCartItem.name }}</p>
<p>{{ tempCartItem.unitPrice | currency: 'USD' }}</p>
</td>
<td>
<div class="items">
<label>Quantity:</label>
<div class="row no-gutters">
<div class="col">
<button (click)="incrementQuantity(tempCartItem)" class="btn btn-primary btn-sm">
<i class="fas fa-plus"></i>
</button>
</div>
<div class="col ml-4 mr-2">
{{ tempCartItem.quantity}}
</div>
<div class="col">
<button (click)="decrementQuantity(tempCartItem)" class="btn btn-primary btn-sm">
<i class="fas fa-minus"></i>
</button>
</div>
<div class="col-8"></div>
</div>
</div>
<button (click)="remove(tempCartItem)" class="btn btn-primary btn-sm mt-2">Remove</button>
<p class="mt-2">Subtotal: {{ tempCartItem.quantity * tempCartItem.unitPrice | currency: 'USD' }}</p>
</td>
</tr>
<tr>
<td colspan="2"></td>
<td style="font-weight: bold">
<p>Total Quantity: {{ totalQuantity }}</p>
<p>Shipping: FREE</p>
<p>Total Price: {{ totalPrice | currency: 'USD' }}</p>
</td>
</tr>
</table>
</div>
<div *ngIf="cartItems.length ==0" class="alert alert-waring col-md-12" role="alert">
购物车是空的
</div>
</div>
</div>
</div>
再到cart-details.component.ts 档案增加语法:
import { CartService } from 'src/app/services/cart.service';
import { Component, OnInit } from '@angular/core';
import { CartItem } from 'src/app/common/cart-item';
@Component({
selector: 'app-cart-details',
templateUrl: './cart-details.component.html',
styleUrls: ['./cart-details.component.css']
})
export class CartDetailsComponent implements OnInit {
cartItems: CartItem[]=[];
totalPrice: number =0;
totalQuantity: number =0;
constructor(private cartService:CartService ) { }
ngOnInit(): void {
this.listCartDetails();
}
listCartDetails() {
this.cartItems = this.cartService.cartItems;
this.cartService.totalPrice.subscribe(
data => this.totalPrice = data
);
this.cartService.totalQuantity.subscribe(
data => this.totalQuantity = data
);
this.cartService.computeCartTotals();
}
incrementQuantity(theCartItem: CartItem){
this.cartService.addToCart(theCartItem);
}
decrementQuantity(theCartItem: CartItem){
this.cartService.decrementQuantity(theCartItem);
}
remove(theCartItem:CartItem){
this.cartService.remove(theCartItem);
}
}
发现可以移除REMOVE 物件
这个得下一篇:https://ithelp.ithome.com.tw/articles/10258602
<<: Ruby幼幼班--Factorial Trailing Zeroes
构造API请求 这是当前版本实验室中使用的API请求范例。该GET请求使用vms API,并列出所选...
要将YouTube影片下载爲MP4格式,您必须首先找到YouTube影片的地址。您可以复制地址并将其...
在人类中,基因肯定是世世代代在传承, 下一代除了接收了上一代的基因之外, 可能还会偷偷的进化, C#...
今天来讲一下Kubernetes的基本安装,这次我们选用MiniKube。MiniKube是一个简单...
离线後备页面介绍 (offline fallback page) 离线後备页面提供用户在网路不稳定的...