Я создал угловой проект 6 с угловым кли.
с использованием углового материала для интерфейса пользователя
Я работаю над каким-то приложением электронной коммерции, поэтому я создал службу корзины со следующим кодом:
import {Inject, Injectable} from '@angular/core';
import { LOCAL_STORAGE, StorageService } from 'ngx-webstorage-service';
import {Product} from './product';
import {CartProduct} from './CartProduct';
const CART_ITEMS = 'cart_items';
@Injectable({
providedIn: 'root'
})
export class CartService {
cartItems: {};
constructor(@Inject(LOCAL_STORAGE) private storage: StorageService) {
if (!this.storage.has(CART_ITEMS)) {
this.storage.set(CART_ITEMS, []);
this.cartItems = {};
} else {
this.cartItems = this.storage.get(CART_ITEMS);
}
}
public addProduct(product: Product, quantity: number) {
if (this.cartItems.hasOwnProperty(product.id)) {
this.cartItems[product.id].quantity += quantity;
} else {
const p: CartProduct = new CartProduct();
p.product = product;
p.quantity = quantity;
this.cartItems[product.id] = p;
}
this.storage.set(CART_ITEMS, this.cartItems);
}
public setProductQuantity(productId: number, quantity: number): boolean {
if (this.cartItems.hasOwnProperty(productId)) {
this.cartItems[productId].quantity = quantity;
this.storage.set(CART_ITEMS, this.cartItems);
return true;
} else {
return false;
}
}
public clearCart() {
this.storage.remove(CART_ITEMS);
this.cartItems = {};
}
public getCart() {
const cartArray = [];
for (const k of Object.keys(this.cartItems)) {
cartArray.push(this.cartItems[k]);
}
return cartArray;
}
public removeProduct(productId: number): boolean {
if (this.cartItems.hasOwnProperty(productId)) {
delete this.cartItems[productId];
this.storage.set(CART_ITEMS, this.cartItems);
return true;
} else {
return false;
}
}
}
Я реализовал функцию getCart(), которая преобразует объект в массив, чтобы предоставить его как DataSource в mat-table.
У меня есть компонент Cart и компонент Product, которые взаимодействуют со службой корзины.
компонент продукта имеет кнопку «добавить продукт» с указанием количества.
поэтому я реализовал это с помощью следующего кода:
import {Component, Input, OnInit} from '@angular/core';
import {Product} from '../product';
import {CartService} from '../cart.service';
@Component({
selector: 'app-product',
templateUrl: './product.component.html',
styleUrls: ['./product.component.scss']
})
export class ProductComponent implements OnInit {
public quantity: number;
@Input() product: Product;
constructor(private cart: CartService) {
this.quantity = 1;
}
addToCart() {
this.cart.addProduct(this.product, this.quantity);
}
ngOnInit() {
}
}
в моем компоненте корзины, я создал функцию удаления товара
removeProduct(productId) {
this.cart.removeProduct(productId);
this.cartItems = this.cart.getCart();
}
Как вы можете видеть здесь, мне действительно нужно было установить переменную this.cartItems снова, чтобы обновление пользовательского интерфейса действительно работало. поэтому здесь, когда я удаляю продукт из корзины из того же компонента, который отображает корзину, обновление работает.
но когда я добавляю продукт из компонента продукта, мне нужно обновить страницу в браузере, чтобы увидеть новый продукт, добавленный в список продуктов корзины.
как мне уведомить компонент mat-table внутри моего Cart компонента, что DataSource был изменен. в моем случае он был изменен компонентом Product.
спасибо