Getting a specific value from an angular2 *ngFor array

Question

I have this cart component that I use for getting the cart data from the back end.

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));
    }
}

This is my object values.

I put all the products inside cartItems as shown on my component and loop it in my template using *ngFor

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

This is the result

Now I want to update the quantity of one item, press the refresh button beside the remove button then it will send just the product details that I have the refresh button pressed to my back end.

Can someone help me on how to make it happen?

I need to get the object value from an array. for example the product Fast, i will update the quantity to 10, how can I get that from an *ngFor array? — Mix Austria
– Mix Austria, Commented Jan 10, 2017 at 0:28

Ram_T · Accepted Answer · 2017-01-10 04:53:04Z

5

On click pass the cartItem in to the function called on click.

<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>

Now, in the component class use the cartItem

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

answered Jan 10, 2017 at 4:53

Ram_T

8,50411 gold badges42 silver badges64 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Mix Austria Over a year ago

what is the $event for?

Ram_T Over a year ago

If you want to do anything with the target element, you can do it with it useng event.target in the function. Just added for future uses. But currently, it is nothing

Collectives™ on Stack Overflow

Getting a specific value from an angular2 *ngFor array

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related