primero que nada gracias si te tomaste tiempo de darme una mano. Tengo un carrito de compras en el que agrego productos; tengo una pagina con el detalle de los productos agregados al carrito en filas, es decir una fila por cada producto, y al lado una columna de acciones para agregar y quitar productos que ya fueron seleccionados y que ya se encuentran en el carrito de compras. conseguí agregar productos, pero no consigo eliminarlos, o sea, no consigo eliminar un producto en particular. me podrías ayudar?
Modelo
export interface Product {
id: string;
title: string;
price: number;
description: string;
image: string;
}
HTML
<mat-horizontal-stepper>
<mat-step>
<ng-template matStepLabel>Sus Productos</ng-template>
<div *ngIf="(products$ | async | countProduct) as products">
<p *ngIf="products.length === 0">
No hay productos en el carrito
</p>
<div class="row" *ngFor="let product of products">
<div class="col-xs-12 col-ms-2 col-md-2">
<div class="box">
{{ product.title }}
<img class="image" [src]="product.image" alt="">
</div>
</div>
<div class="col-xs-12 col-ms-2 col-md-2">
<div class="box">
<p>Cantidad</p>
{{ product.cantidad }}
</div>
</div>
<div class="col-xs-12 col-ms-2 col-md-2">
<div class="box">
<p>Precio unidad</p>
{{ product.price | currency}}
</div>
</div>
<div class="col-xs-12 col-ms-2 col-md-2">
<div class="box">
<button mat-raised-button color="prmary" (click)="addProduct(product)">
+
</button>
<button mat-raised-button color="prmary" (click)="deleteProduct(product)">
-
</button>
</div>
</div>
</div>
<button mat-raised-button color="primary" matStepperNext
[disabled]="products.length === 0">Siguiente</button>
</div>
</mat-step>
<mat-step>
<ng-template matStepLabel>Datos Personales</ng-template>
<app-customer-data></app-customer-data>
</mat-step>
<mat-step>
<ng-template matStepLabel>Pago</ng-template>
<h1>pago</h1>
</mat-step>
</mat-horizontal-stepper>
Servicio
import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';
import { Product } from './../models/product.model';
@Injectable({
providedIn: 'root'
})
export class CartService {
private products: Product[] = [];
private cart = new BehaviorSubject<Product[]>([]);
cart$ = this.cart.asObservable();
constructor() { }
addCart(product: Product) {
this.products = [...this.products, product];
this.cart.next(this.products);
}
deleteCart(product: Product) {
const eliminar = this.products.findIndex(p => p.id === product.id);
this.products = [...this.products.splice(eliminar), product];
this.cart.next(this.products);
}
}
Componente
import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs';
import { Product } from './../../../core/models/product.model';
import { CartService } from './../../../core/services/cart.service';
@Component({
selector: 'app-order',
templateUrl: './order.component.html',
styleUrls: ['./order.component.scss']
})
export class OrderComponent implements OnInit {
products$: Observable<Product[]>;
constructor(
private cartService: CartService
){
this.products$ = this.cartService.cart$;
}
addProduct(product: Product) {
this.cartService.addCart(product);
}
deleteProduct(product: Product) {
this.cartService.deleteCart(product);
}
ngOnInit(): void {
}
}
HTML
en si, en tu caso solo nos muestras 2 botones que se encargan de agregar y eliminar, pero como muestras esos elementos?, esa es la duda mas grande, por que si es por medio de un*ngFor
angular tiene una peculiaridad que tendria que explicarte.