I have page: I write down products list -> send it to endpoint -> received data I am showing at the same page and on second one.
search.page.ts
// From this page I send request.
// this.cartService.setProducts(data['cart']); <- I am applying data to another page
import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { CartService } from '../cart.service';
@Component({
selector: 'app-search',
templateUrl: 'search.page.html',
styleUrls: ['search.page.scss']
})
export class SearchPage {
constructor(public http: HttpClient, private cartService: CartService ) { }
product_name: string;
products_list = [];
add(){
if (this.product_name != undefined){
if (this.product_name.replace(/\s/g, '').length) {
this.products_list.push(this.product_name);
this.product_name = undefined;
}
}
}
delete(index){
if(index > -1){
this.products_list.splice(index, 1);
}
}
result_products = [];
total_price_per_shop = [];
search(){
this.result_products = [];
var url = this.generate_url(this.products_list);
this.http.get(url).subscribe(data=>{
for(var i=0; i < data['products'].length; i++){
this.result_products.push(data['products'][i]);
}
this.cartService.setProducts(data['cart']); // LOOK HERE
this.products_list = [];
});
}
generate_url(products_list) {
var url = 'http://localhost:5000/products/';
for(var i=0; i<products_list.length; i++){
url += this.products_list[i];
if (i != this.products_list.length-1){
url+=',';
}
}
return url
}
}
I have cart.service.ts
import { Injectable } from '@angular/core';
@Injectable({
providedIn: 'root'
})
export class CartService {
private products_list = [
{
product_group: 'Product name 1',
expanded: true,
products: [
{ id: 0, shop:'shop1', name: 'Product 1', price: '8' },
{ id: 1, shop:'shop2', name: 'Product 21', price: '2' },
{ id: 2, shop:'shop3', name: 'Product 2', price: '3' },
{ id: 3, shop:'shop4', name: 'Product 4', price: '7' }
]
}
];
private cart = [];
constructor() { }
setProducts(products){
this.products_list = products;
}
getProducts() {
return this.products_list;
}
getCart() {
return this.cart;
}
addProduct(product) {
this.cart.push(product);
}
removeProduct(product) {
this.cart.splice(product);
}
}
After I send request I got data[‘cart’] written to my cart.service.ts I am opening
select.page.ts
import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { CartService } from '../cart.service';
@Component({
selector: 'app-select',
templateUrl: 'select.page.html',
styleUrls: ['select.page.scss']
})
export class SelectPage implements OnInit {
cart = [];
products = [];
sliderConfig = {
slidesPerView: 1.5,
spaceBetween: 5,
centeredSlides: true
};
constructor(private router: Router, private cartService: CartService) { }
ngOnInit() {
this.products = this.cartService.getProducts(); <- LOOK HERE
this.cart = this.cartService.getCart();
}
addToCart(product) {
this.cartService.addProduct(product);
}
removeFromCart(product) {
this.cartService.removeProduct(product);
}
openCart() {
this.router.navigate(['cart']);
}
}
So, after data applied to cart.service.ts I am getting it with a help of getProducts();
Here is the problem:
If I made request once data will be written correct. If I am trying to send request second time - data will NOT be written to my select.page.ts and I will have the same products list I made in previous query.
Hope, my explaining is clear, how can I deal with it?
Thank you for any useful information!