Question

我在以下代码中使用角度4我想在用户点击时添加新产品＆＃34;添加到购物车＆＃34;选项，但是当用户点击下一个产品时，它会覆盖第一个产品而不是附加购物车数组

Still over write the array , Please see the picture

cart.service.ts

export class Cart {
  products : Product[] = []
}

@Injectable()
export class CartService {
  constructor(private http: Http) {}
}

父组件html

<div class="row">
  <product-box class="col-lg-3 col-md-4 col-sm-6 col-xs-12" *ngFor="let product of products" [product]="product">
  </product-box>
 </div>

子组件html

<div class="item-cart">
  <a class="btn btn-info" (click)="addToCart(product)" >
    Add To Cart <i class="fa fa-shopping-cart" aria-hidden="true"></i>
  </a>
</div>

父组件

import { Component, OnInit } from '@angular/core';
import {Product, ProductService} from '../../../shared/services/product.service';
import {ProductBoxComponent} from '../product-box/product-box.component';
import { ProductPhoto, ProductPhotoService } from '../../../shared/services/product-photos.service';


@Component({
  selector: 'product-list',
  templateUrl: './product-list.component.html',
  styleUrls: ['./product-list.component.css']
})
export class ProductListComponent implements OnInit {
    products: any = [];

  constructor( private productService : ProductService, private productPhotoService: ProductPhotoService) { }

  ngOnInit() {
     this.loadPrimaryPhoto();
  }
     loadPrimaryPhoto(){
    this.productPhotoService.listPrimaryPhoto().then(response => {
     this.products = response.json();
    }, error => { });
  }


}

子组件

import { Component, Input, Output, EventEmitter, OnInit } from '@angular/core';
import { Product, ProductService } from '../../../shared/services/product.service';
import { ProductPhoto, ProductPhotoService } from '../../../shared/services/product-photos.service';
import { Cart, CartService } from '../../../shared/services/cart.service';
import { SettingsService } from '../../../shared/services/settings.service';



@Component({
  selector: 'product-box',
  templateUrl: './product-box.component.html',
  styleUrls: ['./product-box.component.css'],
})
export class ProductBoxComponent implements OnInit {
  @Input() product: ProductPhoto;
  imagePath: any;
  // cart = [];
  private cart: Cart[]=[] ;
  constructor(private settings: SettingsService ) {
  }

  ngOnInit() {
  }

  addToCart(products) {
    this.cart.push(products);
    console.log('cart=', this.cart);
  }
}

Answer 1

ProductBoxComponent.cart不能是数组，它是Cart类型的对象，应通过new运算符初始化。此外，如果ProductBoxComponent.addToCart()方法的参数具有Product类型，则应将其推送到Cart.products数组。

private cart: Cart;

constructor(private settings: SettingsService ) {
  this.cart = new Cart();
}

addToCart(product: Product) {
  this.cart.products.push(product);
  console.log('cart=', this.cart.products);
}

Answer 2

尝试在下面的构造函数中注入您的购物车服务：

Component

import { Component, Input, Output, EventEmitter, OnInit } from '@angular/core';
import { Product, ProductService } from '../../../shared/services/product.service';
import { ProductPhoto, ProductPhotoService } from '../../../shared/services/product-photos.service';
import { Cart, CartService } from '../../../shared/services/cart.service';
import { SettingsService } from '../../../shared/services/settings.service';



@Component({
  selector: 'product-box',
  templateUrl: './product-box.component.html',
  styleUrls: ['./product-box.component.css'],
})
export class ProductBoxComponent implements OnInit {
  @Input() product: ProductPhoto;
  imagePath: any;
  constructor(private settings: SettingsService, private cart: Cart ) {

  }

  ngOnInit() {
  }
  addToCart(products) {
     this.cart.products.push(products)

    console.log('cart=', this.cart);
  }


}

Answer 3

此行为的原因是，您在每次迭代中创建子项的单独实例。所以每个孩子都会将它与嵌套数组分开cart。因此，您不需要处理所有产品的单个变量推车。那么你的代码现在所做的就是为每个子组件实例创建一个新的购物车。因此，您的产品不会被覆盖，它们只是不同的变量。

如果要使用唯一的子组件实例，则应将数组作为@Input传递并迭代子组件中的数组：

<product-box [products]="products"></product-box>

然后迭代您孩子的产品，然后将所选产品添加到您的购物车中：

<div *ngFor="let product of products">
  <p (click)="addToCart(product)">{{product.name}}</p>
</div>

TS：

private cart: Cart = new Cart();

addToCart(product) {
  this.cart.products.push(product);
  console.log('cart=', this.cart);
}

这样你只需要一个购物车，而不是每个儿童组件的推车。

Angular 4：当数组中的新项目被推送时，购物车数组会被覆盖

3 个答案: