从购物车中删除按钮不起作用，在 angular

Question

I'm trying to hit the remove button and for my html quantity to update to one quantity lower for that item only, then remove it entirely when the quantity in 0.but when i hit the remove button nothing happens. any help is appreciated. Also my commented out foreach loop works at changing the html but changes the quantity for all products when i hit the remove button...................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................... .................................................................................................................................................................................................................................

```ts
import {Component, Input, OnInit} from '@angular/core';
import { Router } from '@angular/router';
import { Product } from 'src/app/models/product';
import { ProductService } from 'src/app/services/product.service';

@Component({
  selector: 'app-cart',
  templateUrl: './cart.component.html',
  styleUrls: ['./cart.component.css']
})
export class CartComponent implements OnInit {

  //added
  cartCount!: number;

  products: {
    product: Product,
    quantity: number,

  }[] = [];
  totalPrice!: number;
  cartProducts: Product[] = [];

  //added
  @Input() productInfo!: Product;

  constructor(private productService: ProductService, private router: Router) { }

  ngOnInit(): void {
    this.productService.getCart().subscribe(
      (cart) => {
        this.products = cart.products;
        this.products.forEach(
          (element) => this.cartProducts.push(element.product)
        );
        this.totalPrice = cart.totalPrice;
      }
    );
  }

  emptyCart(): void {
    let cart = {
      cartCount: 0,
      products: [],
      totalPrice: 0.00
    };
    this.productService.setCart(cart);
    this.router.navigate(['/home']);
  }

  //added
  removeFromCart(product: Product): void {

    /*this.products.forEach(
      (element) => {
        --element.quantity;
        if(element.quantity<1){
          this.products.pop();
        }
      }
    );*/
    --product.quantity;
    if(product.quantity<1){
      this.products = this.products.filter(({product: p}) => p.id !== product.id)
    }
  }



}```





```html
<app-navbar></app-navbar>
<table class="table table-striped" id="cart-table">
    <thead>
      <tr>
        <th scope="col">ID</th>
        <th scope="col">Name</th>
        <th scope="col">Quantity</th>
        <th scope="col">Description</th>
      </tr>
    </thead>
    <tbody id="cart-table-body">
        <tr *ngFor="let product of products;">
            <td>{{product.product.id}}</td>
            <td>{{product.product.name}}</td>
            <td>{{product.quantity}}</td>
            <td>{{product.product.description}}</td>
          //added
          <td><button class="btn btn-outline-success" (click)="removeFromCart(productInfo)">Remove from Cart</button></td>
        </tr>
    </tbody>
</table>
<button class="btn btn-danger" [routerLink]="['/home']">Back</button>
<button class="btn btn-warning" (click)="emptyCart()">Empty Cart</button>
<button class="btn btn-primary" [routerLink]="['/checkout']">Proceed to Checkout (${{totalPrice}})</button>
```

[picture of my html][1]


  [1]: https://i.stack.imgur.com/b3W3I.png

Answer 1

this.products.filter(({product: p}) => p.id.== product.id) should be
this.products.filter((p:Product) => p.id.== product.id)