当前位置:  开发笔记 > 编程语言 > 正文

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

如何解决《从angular2*ngFor数组中获取特定值》经验,为你挑选了1个好方法。

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

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将其循环到我的模板中


这是结果

在此输入图像描述

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

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



1> Mr_Perfect..:

单击时,将cartItem传递给单击时调用的函数.


    
      {{cartItem.product}}
      {{cartItem.size}}
      {{cartItem.price}}
      {{cartItem.quantity}}
      {{cartItem.subtotal}}
      
    

现在,在组件类中使用 cartItem

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

推荐阅读
重庆制造漫画社
这个屌丝很懒,什么也没留下!
DevBox开发工具箱 | 专业的在线开发工具网站    京公网安备 11010802040832号  |  京ICP备19059560号-6
Copyright © 1998 - 2020 DevBox.CN. All Rights Reserved devBox.cn 开发工具箱 版权所有