[英]Angular2 - call method after model changed
我的angular2應用中有一個簡單的組件:
@Component({
selector: 'app-product',
templateUrl: './product.component.html',
styleUrls: ['./product.component.css'],
providers: [ProductService, CardService]
})
export class ProductComponent implements OnInit {
private products;
constructor(private productService: ProductService, private cartService: CartService) {
}
ngOnInit() {
this.loadProducts();
}
loadProducts() {
this.productService.getProducts().subscribe(data => this.products = data);
}
addProductToCart(product: Product) {
this.cartService.addProduct(product);
}
basketAmount() {
this.cartService.getNumberOfProducts();
}
與其連接的html
文件:
<div class="basket">
On your card: {{basketAmount()}}
</div>
<table class="table table-striped">
<thead class="thead-inverse">
<tr>
<th>#</th>
<th>Name</th>
<th>Desc</th>
<th>Price</th>
<th>Amount</th>
</tr>
</thead>
<tbody *ngFor="let product of products">
<tr>
<th scope="row">{{product.id}}</th>
<td>{{product.name}}</td>
<td>{{product.description}}</td>
<td>{{product.price}}</td>
<td>{{product.amount}}</td>
<button type="button" class="btn btn-success" (click)="addProductToCart(product)">Add to cart</button>
</tr>
</tbody>
</table>
和CartService
@Injectable()
export class CardService {
private cart: Product[] = [];
constructor() {
}
addProduct(product: Product) {
this.cart.push(product);
}
getTotalPrice() {
const totalPrice = this.cart.reduce((sum, cardItem) => {
return sum += cardItem.price, sum;
}, 0);
return totalPrice;
}
getNumberOfProducts() {
const totalAmount = this.card.reduce((sum, cardItem) => {
return sum += cardItem.amount, sum;
}, 0);
return totalAmount;
}
}
export interface Product {
id: number;
name: string;
description: string;
price: number;
amount: number;
}
在將商品添加到購物車並將其顯示在視圖中之后,我想更新購物車中的商品數量。 通過單擊將商品添加到購物車,然后調用addProductToCart
方法。 同時,我想通過在CartService
定義的basketAmount()
更新一些商品,並返回購物車上的商品數量。 我想我應該以某種方式觸發這個basketAmount()
方法,但我不知道如何。 如何以一種好的方式做到這一點?
您有多種選擇
BehaviorSubject
。 在這種情況下,您只需要訂閱它,每當您將商品推入購物車時,它將自動更新您的購物車。 好的,我找到了解決方案。 我將一個簡單的numberOfItems變量添加到ProductComponent
:
export class ProductComponent implements OnInit {
private products;
private numberOfItems;
constructor(private productService: ProductService, private cardService: CardService) {
}
ngOnInit() {
this.loadProducts();
}
loadProducts() {
this.productService.getProducts().subscribe(data => this.products = data);
}
addProductToCard(product: Product) {
this.cardService.addProduct(product);
}
basketAmount() {
this.numberOfItems = this.cardService.getNumberOfProducts();
}
}
在視圖上,單擊並更新numberOfItems之后,我調用了兩個方法:
<div class="basket">
On your card: {{numberOfItems}}
</div>
<table class="table table-striped">
<thead class="thead-inverse">
<tr>
<th>#</th>
<th>Name</th>
<th>Desc</th>
<th>Price</th>
<th>Amount</th>
</tr>
</thead>
<tbody *ngFor="let product of products">
<tr>
<th scope="row">{{product.id}}</th>
<td>{{product.name}}</td>
<td>{{product.description}}</td>
<td>{{product.price}}</td>
<td>{{product.amount}}</td>
<button type="button" class="btn btn-success" (click)="addProductToCard(product); basketAmount()">Add to card</button>
</tr>
</tbody>
</table>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.