Я строю интернет-магазин с некоторыми продуктами.Пользователь может добавить в корзину, и он может видеть товары, которые он добавил.У меня есть три категории.Одна категория - это все продукты, в которых я отображаю все продукты, и одна категория фруктов и хлеба, где я отображаю конкретные продукты. Все работает нормально, но когда я меняю категорию, не нажимая кнопку добавления в корзину, угловой выполняет метод addToCart. Я думаю, что этопроблема с несколькими подписками и утечка памяти .. Как я могу сделать это с лучшим кодированием? Вот мои ts и html угловые файлы.
My products.ts
import {Component, OnDestroy, OnInit} from '@angular/core';
import {CategoryService} from '../category.service';
import {ActivatedRoute} from '@angular/router';
import {Subject} from 'rxjs/index';
import 'rxjs/add/operator/takeUntil';
import {ShoppingCartService} from '../services/shopping-cart.service';
import {Product} from '../models/product';
@Component({
selector: 'app-products',
templateUrl: './products.component.html',
styleUrls: ['./products.component.css'],
})
export class ProductsComponent implements OnInit, OnDestroy {
products: any;
filteredproducts: any;
category: any;
res: any;
categoryid: any;
cartId: any;
private ngUnsubscribe: Subject<any> = new Subject();
constructor(private service: CategoryService,
private route: ActivatedRoute,
private cartService: ShoppingCartService) {
}
ngOnInit() {
this.route.queryParamMap.takeUntil(this.ngUnsubscribe).subscribe(params => {
this.category = params.get('category');
this.cartId = localStorage.getItem('cartId');
if (this.category) {
setTimeout(() => {
this.service.allProductNames(this.category, this.cartId).takeUntil(this.ngUnsubscribe).subscribe(data => {
this.filteredproducts = this.products = data;
});
}, 500);
} else {
if (this.cartId === null) {this.cartId = -1; }
setTimeout(() => {
this.service.getProducts(this.cartId).takeUntil(this.ngUnsubscribe).subscribe(data => {
this.filteredproducts = data;
});
}, 500);
}
});
}
addToCart(products: Product) {
const cartId = this.cartService.getOrCreateCartId();
if (!cartId) {
const imero = new Date().getTime();
this.cartService.create(imero).takeUntil(this.ngUnsubscribe).subscribe(res => {
this.res = res;
localStorage.setItem('cartId', this.res.id);
this.route.queryParamMap.takeUntil(this.ngUnsubscribe).subscribe(params => {
this.categoryid = params.get('category');
if (this.categoryid) {
this.cartService.createItem(products.id, this.res.id).
takeUntil(this.ngUnsubscribe).subscribe(res1 => {
setTimeout(() => {
this.service.allProductNames(this.category, this.res.id).takeUntil(this.ngUnsubscribe).subscribe(data => {
this.filteredproducts = this.products = data;});
}, 500);
});
} else {
this.cartService.createItem(products.id, this.res.id).takeUntil(this.ngUnsubscribe).subscribe(res2 => {
setTimeout(() => {
this.service.getProducts(this.res.id).takeUntil(this.ngUnsubscribe).subscribe(data => {
this.filteredproducts = data;
});
}, 500);
} );
}
});
});
}
else {
this.route.queryParamMap.takeUntil(this.ngUnsubscribe).subscribe(params => {
this.categoryid = params.get('category');
this.cartId = localStorage.getItem('cartId');
if (this.category) {
this.cartService.createItem(products.id, this.cartId).takeUntil(this.ngUnsubscribe).subscribe(res1 => {});
setTimeout(() => {
this.service.allProductNames(this.category, this.cartId).takeUntil(this.ngUnsubscribe).subscribe(data => {
this.filteredproducts = data;
});
}, 500);
} else {
this.cartService.createItem(products.id, this.cartId).takeUntil(this.ngUnsubscribe).subscribe(res1 => {});
setTimeout(() => {
this.service.getProducts(this.cartId).takeUntil(this.ngUnsubscribe).subscribe(data => {
this.filteredproducts = data;
console.log(this.products);});
}, 500);
}
});
}
}
ngOnDestroy() {
this.ngUnsubscribe.next();
this.ngUnsubscribe.complete();
}
}
My products.html
<div class="row">
<div class="col-sm-3">
<app-product-filter></app-product-filter>
</div>
<div class="col-sm-9">
<div class="row">
<ng-container *ngFor="let p of filteredproducts; let i = index">
<div class="col">
<div class="card">
<img class="card-img-top" src="{{p?.imageUrl}}" style="max-height: 200px; width: 100%;">
<div class="card-body">
<h5 class="card-title">{{p?.title}}</h5>
<p class="card-text">{{p?.price | currency: 'EUR': symbol }}</p>
</div>
<div class="card-footer">
<button (click)="addToCart(p)" class="btn btn-primary btn-block">Add to Cart</button>
<div *ngIf="p?.quantity!=0">{{p?.quantity}}</div>
</div>
</div>
</div>
<div *ngIf="(i+1) % 2 === 0" class="w-100"></div>
</ng-container>
</div>
</div>
</div>