Задача: спарсить данные о товарах в корзине в формт json и вывести их ниже.
У меня есть корзина, в ней я парсю данные и перевожу в формат json, но вывести их на страницу не могу. В консоли все выходит, но на страницу не могу.
cart.service
import { Injectable } from '@angular/core';
@Injectable({
providedIn: 'root'
})
export class CartService {
cartItems = [] as any[];
constructor() { }
addToCart(product: any) {
this.cartItems.push({
productId: product.id,
img: product.img,
name: product.name,
price: product.price,
totalPrice: product.price * product.qty,
qty: product.qty,
});
}
cartTotal : number = 0;
// TODO итоговая стоимость некорректно работает
totalCostOfCart(){
}
getCartItems() {
return this.cartItems;
}
// clearCart() {
// this.cartItems = [];
// return this.cartItems;
// }
delete(product: any) {
this.cartItems.splice(this.cartItems.indexOf(product), 1);
}
plusQty(product: any) {
let productId = this.cartItems.indexOf(product);
this.cartItems[productId].qty++;
this.cartItems[productId].totalPrice = this.cartItems[productId].price * this.cartItems[productId].qty;
}
minusQty(product: any) {
let productId = this.cartItems.indexOf(product);
this.cartItems[productId].qty--;
this.cartItems[productId].totalPrice = this.cartItems[productId].price * this.cartItems[productId].qty;
if (this.cartItems[productId].qty === 0) {
this.delete(product)
}
}
cartJson = [] as any [];
parseToJsonCartItems() {
this.cartItems.map(el => {
// console.log(el);
let cartItemJSON = (JSON.parse(JSON.stringify(el)));
console.log("TO JSON");
console.log(cartItemJSON);
return cartItemJSON;
})
// if (Array.isArray(arr)) {
// console.log("array");
// } else if (typeof arr == 'string') console.log ('string');
// else if (arr != null && typeof arr == 'object') console.log ('object');
// else console.log ('other');
}
}
cart.component.ts
import { Component, OnInit } from '@angular/core';
import { CartService } from 'src/app/services/cart.service';
import { WishlistService } from 'src/app/services/wishlist.service';
@Component({
selector: 'app-cart',
templateUrl: './cart.component.html',
styleUrls: ['./cart.component.scss']
})
export class CartComponent implements OnInit {
cartItems = [] as any[];
productPrice = [];
cartTotal !: any;
cartItemJSON : any;
cartJson = [] as any [];
constructor(
private cartService: CartService,
private wishlistService: WishlistService,
) { }
ngOnInit(): void {
this.cartItems = this.cartService.getCartItems();
this.cartService.parseToJsonCartItems();
}
delete(item: any) {
this.cartService.delete(item);
}
plusQty(item: any) {
this.cartService.plusQty(item);
}
minusQty(item: any) {
this.cartService.minusQty(item);
}
addToWishlist(item: any) {
this.wishlistService.addToWishlist(item);
this.cartService.delete(item);
}
parseToJsonCartItems() {
this.cartService.parseToJsonCartItems();
}
}
cart.component.html
<div class="cart-item" *ngFor="let item of cartItems">
<span>Product name {{ item.name }}</span>
<br>
<span>price: {{ item.totalPrice | currency }}</span>
<br>
<div class="cart-item__quantity">
<button class="cart-item__quantity__minus" (click)="minusQty(item)">
-
</button>
<div class="cart-item__quantity__qty">
qty: {{ item.qty }}
</div>
<button class="cart-item__quantity__plus" (click)="plusQty(item)">
+
</button>
</div>
<button class="cart-item__item__button-delete" (click)="delete(item)">delete</button>
<button class="cart-item__item__button-wishlist" (click)="addToWishlist(item)">wishlist and delete from
cart</button>
</div>
<button (click)="parseToJsonCartItems()">TO JSON</button>
<div>
cartItemJSON {{cartItemJSON}}
</div>
<div>cartItems.length {{cartItems.length}}</div>
В ангуляре я новичек. Как их вывести на страницу?