角度 4 :当新项目推入数组时，购物车数组覆盖

Question

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

还是写数组，请看图片

购物车.服务.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);
}

这样，您将只有一个购物车，而不是每个子组件的购物车。