从angular2 * ngFor数组中获取特定值

Question

我有这个购物车组件，用于从后端获取购物车数据。

import { Component, OnInit } from '@angular/core';

import { CartService } from './cart.service';

@Component({
    selector: 'cart',
    templateUrl: './cart.component.html',
    styleUrls: ['./cart.component.css']
})

export class CartComponent implements OnInit{
    carts: any;
    cartItems: any;
    totalPrice: Number;

    constructor(private _cartService: CartService){};

    ngOnInit(){
        this.getItems();
    }

    getItems(){
        this._cartService.getCartItems(localStorage.getItem('currentUserId'))
            .subscribe((cart) => {
                this.cartItems = cart.products;
                this.totalPrice = cart.totalPrice;
                this.carts = cart;
                console.log(this.carts)
            },
            (err) => console.log(err));
    }
}

这是我的对象值。

我将所有产品放在我的组件中显示的cartItems中，并使用* ngFor

将其循环到我的模板中

<tbody *ngFor="let cartItem of cartItems">

这是结果

现在我想更新一个项目的数量，按下删除按钮旁边的刷新按钮，然后它会发送我按下刷新按钮到我后端的产品详细信息。

有人可以帮我解决这个问题吗？

Answer 1

单击时，将cartItem传递给单击时调用的函数。

<tbody>
    <tr *ngFor="let cartItem of cartItems">
      <td>{{cartItem.product}}</td>
      <td>{{cartItem.size}}</td>
      <td>{{cartItem.price}}</td>
      <td>{{cartItem.quantity}}</td>
      <td>{{cartItem.subtotal}}</td>
      <td><button (click)="onClick($event, cartItem)">Refresh Button</button></td>
    </tr>
</tbody>

现在，在组件类中使用cartItem

onClick(event, cartItem){
   console.log(cartItem); // here your cart item object will be shown
   // do your stuff here with your cartItem
}