Javascript 角度：使用服务将单个列表项从数组列表转移到另一个服务？ 将单个项目从列表项目转移到购物车列表。

我正在开发一个Angularweb应用程序，希望当我单击一个按钮时，阵列中的单个项目从一个服务传输到另一个服务，并在另一个组件上传输。我已经成功地实现了整个阵列的传输，但我在单个项目上遇到了问题。请帮助

---

我想要的是，当我点击

addtocart

按钮时，被点击的列表项只会被转移，而不是列表项的数组

---

buyGame.html文件

<div class="col-xs-6">
    <a class="list-group-item clearfix" style="background-color:rgb(3, 0, 48)" *ngFor="let buying of buy">
        <div class="pull-left" style="max-width:330px">
            <h5 style="color:white">{{buying.names}}</h5>
            <p style="color:white">{{buying.desc}}</p>
            <button class="btn btn-danger ; pull-left" (click)= "onAddToCart()">Add To Cart</button>
        </div>
        <div>
            <span class="pull-right">
                <img [src]="buying.getImg" alt="image not loaded" class="img-responsive" style="max-height:100px">
            </span>
        </div>
    </a>
</div>

buyGame.component.ts:

import { gameBuy } from "./buygame.model";
import { Injectable,EventEmitter } from "@angular/core";
import { cartService } from "./cart.service";

@Injectable()
export class gameService{

    private gameServ: gameBuy[] = [
        new gameBuy('batman','Batmobile and enhancements to signature features',"https://www.geek.com/wp-content/uploads/2016/02/batmans-625x352.jpg"),
        new gameBuy('GTA 5',
        "PlayStation 3 or Xbox 360 will be able to transfer their current Grand Theft Auto Online characters and progression to their choice of PlayStation 4 Xbox One or PC",
        "http://onlysp.com/wp-content/uploads/2015/01/maxresdefault.jpg")
    ];

    constructor(private cartSer: cartService){}

    getBuyingList(){
        return this.gameServ.slice();
    }

    addItemToCart(game:gameBuy[]){
        this.cartSer.addItem(game);
    }
}

import { Component, OnInit,Input } from '@angular/core';
import { gameBuy } from '../shared/buygame.model';
import { gameService } from '../shared/buygame.service';

@Component({
  selector: 'app-buy-game',
  templateUrl: './buy-game.component.html',
  styleUrls: ['./buy-game.component.css'],
})
export class BuyGameComponent implements OnInit {

  @Input() buy:gameBuy[];

  constructor(private service: gameService) { }

  ngOnInit() {
    this.buy = this.service.getBuyingList();
  }

  onAddToCart(){
 this.service.addItemToCart(this.buy);
  }
}

import { Component, OnInit} from '@angular/core';
import { cartModel } from '../shared/cart.model';
import { cartService } from '../shared/cart.service';
import { gameBuy } from '../shared/buygame.model';

@Component({
  selector: 'app-cart',
  templateUrl: './cart.component.html',
  styleUrls: ['./cart.component.css'],
})
export class CartComponent implements OnInit {

   cart:gameBuy[];

  constructor(private service: cartService) { }

  ngOnInit() {
    this.cart = this.service.getCartItem();
  }

}

import { cartModel } from "./cart.model";
import { EventEmitter } from "@angular/core";
import { gameBuy } from "./buygame.model";

export class cartService{

    cartChanged = new EventEmitter<gameBuy[]>();
    private cart: gameBuy[] = [
        new gameBuy('Batman','Batman is a cool game','https://images-na.ssl-images-amazon.com/images/I/91lu5KHSm3L._SY445_.jpg'),
        new gameBuy('Gta 5','online game of GTA','https://www.rockstargames.com/V/img/global/order/mobile-cover.jpg')
    ];

    getCartItem(){
        return this.cart.slice();
    }

    addItem(cart:gameBuy[]){
        this.cart.push(...cart);
        this.cartChanged.emit(this.cart.slice());
    }
}

export class cartModel{
    constructor(public cartName: string,public cartDesc: string,public cartImage:string){}
}

export class gameBuy{
    constructor(public names:string, public desc:string, public getImg:string){}
}

cart.component.ts:

import { gameBuy } from "./buygame.model";
import { Injectable,EventEmitter } from "@angular/core";
import { cartService } from "./cart.service";

@Injectable()
export class gameService{

    private gameServ: gameBuy[] = [
        new gameBuy('batman','Batmobile and enhancements to signature features',"https://www.geek.com/wp-content/uploads/2016/02/batmans-625x352.jpg"),
        new gameBuy('GTA 5',
        "PlayStation 3 or Xbox 360 will be able to transfer their current Grand Theft Auto Online characters and progression to their choice of PlayStation 4 Xbox One or PC",
        "http://onlysp.com/wp-content/uploads/2015/01/maxresdefault.jpg")
    ];

    constructor(private cartSer: cartService){}

    getBuyingList(){
        return this.gameServ.slice();
    }

    addItemToCart(game:gameBuy[]){
        this.cartSer.addItem(game);
    }
}

import { Component, OnInit,Input } from '@angular/core';
import { gameBuy } from '../shared/buygame.model';
import { gameService } from '../shared/buygame.service';

@Component({
  selector: 'app-buy-game',
  templateUrl: './buy-game.component.html',
  styleUrls: ['./buy-game.component.css'],
})
export class BuyGameComponent implements OnInit {

  @Input() buy:gameBuy[];

  constructor(private service: gameService) { }

  ngOnInit() {
    this.buy = this.service.getBuyingList();
  }

  onAddToCart(){
 this.service.addItemToCart(this.buy);
  }
}

import { Component, OnInit} from '@angular/core';
import { cartModel } from '../shared/cart.model';
import { cartService } from '../shared/cart.service';
import { gameBuy } from '../shared/buygame.model';

@Component({
  selector: 'app-cart',
  templateUrl: './cart.component.html',
  styleUrls: ['./cart.component.css'],
})
export class CartComponent implements OnInit {

   cart:gameBuy[];

  constructor(private service: cartService) { }

  ngOnInit() {
    this.cart = this.service.getCartItem();
  }

}

import { cartModel } from "./cart.model";
import { EventEmitter } from "@angular/core";
import { gameBuy } from "./buygame.model";

export class cartService{

    cartChanged = new EventEmitter<gameBuy[]>();
    private cart: gameBuy[] = [
        new gameBuy('Batman','Batman is a cool game','https://images-na.ssl-images-amazon.com/images/I/91lu5KHSm3L._SY445_.jpg'),
        new gameBuy('Gta 5','online game of GTA','https://www.rockstargames.com/V/img/global/order/mobile-cover.jpg')
    ];

    getCartItem(){
        return this.cart.slice();
    }

    addItem(cart:gameBuy[]){
        this.cart.push(...cart);
        this.cartChanged.emit(this.cart.slice());
    }
}

export class cartModel{
    constructor(public cartName: string,public cartDesc: string,public cartImage:string){}
}

export class gameBuy{
    constructor(public names:string, public desc:string, public getImg:string){}
}

cart.service.ts:

import { gameBuy } from "./buygame.model";
import { Injectable,EventEmitter } from "@angular/core";
import { cartService } from "./cart.service";

@Injectable()
export class gameService{

    private gameServ: gameBuy[] = [
        new gameBuy('batman','Batmobile and enhancements to signature features',"https://www.geek.com/wp-content/uploads/2016/02/batmans-625x352.jpg"),
        new gameBuy('GTA 5',
        "PlayStation 3 or Xbox 360 will be able to transfer their current Grand Theft Auto Online characters and progression to their choice of PlayStation 4 Xbox One or PC",
        "http://onlysp.com/wp-content/uploads/2015/01/maxresdefault.jpg")
    ];

    constructor(private cartSer: cartService){}

    getBuyingList(){
        return this.gameServ.slice();
    }

    addItemToCart(game:gameBuy[]){
        this.cartSer.addItem(game);
    }
}

import { Component, OnInit,Input } from '@angular/core';
import { gameBuy } from '../shared/buygame.model';
import { gameService } from '../shared/buygame.service';

@Component({
  selector: 'app-buy-game',
  templateUrl: './buy-game.component.html',
  styleUrls: ['./buy-game.component.css'],
})
export class BuyGameComponent implements OnInit {

  @Input() buy:gameBuy[];

  constructor(private service: gameService) { }

  ngOnInit() {
    this.buy = this.service.getBuyingList();
  }

  onAddToCart(){
 this.service.addItemToCart(this.buy);
  }
}

import { Component, OnInit} from '@angular/core';
import { cartModel } from '../shared/cart.model';
import { cartService } from '../shared/cart.service';
import { gameBuy } from '../shared/buygame.model';

@Component({
  selector: 'app-cart',
  templateUrl: './cart.component.html',
  styleUrls: ['./cart.component.css'],
})
export class CartComponent implements OnInit {

   cart:gameBuy[];

  constructor(private service: cartService) { }

  ngOnInit() {
    this.cart = this.service.getCartItem();
  }

}

import { cartModel } from "./cart.model";
import { EventEmitter } from "@angular/core";
import { gameBuy } from "./buygame.model";

export class cartService{

    cartChanged = new EventEmitter<gameBuy[]>();
    private cart: gameBuy[] = [
        new gameBuy('Batman','Batman is a cool game','https://images-na.ssl-images-amazon.com/images/I/91lu5KHSm3L._SY445_.jpg'),
        new gameBuy('Gta 5','online game of GTA','https://www.rockstargames.com/V/img/global/order/mobile-cover.jpg')
    ];

    getCartItem(){
        return this.cart.slice();
    }

    addItem(cart:gameBuy[]){
        this.cart.push(...cart);
        this.cartChanged.emit(this.cart.slice());
    }
}

export class cartModel{
    constructor(public cartName: string,public cartDesc: string,public cartImage:string){}
}

export class gameBuy{
    constructor(public names:string, public desc:string, public getImg:string){}
}

buygame.model.ts:

import { gameBuy } from "./buygame.model";
import { Injectable,EventEmitter } from "@angular/core";
import { cartService } from "./cart.service";

@Injectable()
export class gameService{

    private gameServ: gameBuy[] = [
        new gameBuy('batman','Batmobile and enhancements to signature features',"https://www.geek.com/wp-content/uploads/2016/02/batmans-625x352.jpg"),
        new gameBuy('GTA 5',
        "PlayStation 3 or Xbox 360 will be able to transfer their current Grand Theft Auto Online characters and progression to their choice of PlayStation 4 Xbox One or PC",
        "http://onlysp.com/wp-content/uploads/2015/01/maxresdefault.jpg")
    ];

    constructor(private cartSer: cartService){}

    getBuyingList(){
        return this.gameServ.slice();
    }

    addItemToCart(game:gameBuy[]){
        this.cartSer.addItem(game);
    }
}

import { Component, OnInit,Input } from '@angular/core';
import { gameBuy } from '../shared/buygame.model';
import { gameService } from '../shared/buygame.service';

@Component({
  selector: 'app-buy-game',
  templateUrl: './buy-game.component.html',
  styleUrls: ['./buy-game.component.css'],
})
export class BuyGameComponent implements OnInit {

  @Input() buy:gameBuy[];

  constructor(private service: gameService) { }

  ngOnInit() {
    this.buy = this.service.getBuyingList();
  }

  onAddToCart(){
 this.service.addItemToCart(this.buy);
  }
}

import { Component, OnInit} from '@angular/core';
import { cartModel } from '../shared/cart.model';
import { cartService } from '../shared/cart.service';
import { gameBuy } from '../shared/buygame.model';

@Component({
  selector: 'app-cart',
  templateUrl: './cart.component.html',
  styleUrls: ['./cart.component.css'],
})
export class CartComponent implements OnInit {

   cart:gameBuy[];

  constructor(private service: cartService) { }

  ngOnInit() {
    this.cart = this.service.getCartItem();
  }

}

import { cartModel } from "./cart.model";
import { EventEmitter } from "@angular/core";
import { gameBuy } from "./buygame.model";

export class cartService{

    cartChanged = new EventEmitter<gameBuy[]>();
    private cart: gameBuy[] = [
        new gameBuy('Batman','Batman is a cool game','https://images-na.ssl-images-amazon.com/images/I/91lu5KHSm3L._SY445_.jpg'),
        new gameBuy('Gta 5','online game of GTA','https://www.rockstargames.com/V/img/global/order/mobile-cover.jpg')
    ];

    getCartItem(){
        return this.cart.slice();
    }

    addItem(cart:gameBuy[]){
        this.cart.push(...cart);
        this.cartChanged.emit(this.cart.slice());
    }
}

export class cartModel{
    constructor(public cartName: string,public cartDesc: string,public cartImage:string){}
}

export class gameBuy{
    constructor(public names:string, public desc:string, public getImg:string){}
}

---

您需要在temlate中指定要添加到购物车的确切项目：

(click)= "onAddToCart(buying)"

然后将其作为

onAddToCart

method参数直接传递给您的服务：

onAddToCart(buying: gameBuy){
  this.service.addItemToCart(buying);
}

此外，您的

buygame

服务方法应接受单个项目，而不是列表：

addItemToCart(game: gameBuy){
    this.cartSer.addItem(game);
}

Atl last，

购物车

服务也应更新（仅用于推送单个项目）

---

您需要在temlate中指定要添加到购物车的确切项目：

(click)= "onAddToCart(buying)"

然后将其作为

onAddToCart

method参数直接传递给您的服务：

onAddToCart(buying: gameBuy){
  this.service.addItemToCart(buying);
}

此外，您的

buygame

服务方法应接受单个项目，而不是列表：

addItemToCart(game: gameBuy){
    this.cartSer.addItem(game);
}

Atl last，

购物车

服务也应更新（仅用于推送单个项目）

---

尝试在调用中提供索引（单击）=“onAddToCart（索引）”并从数组中获取它

或者在（单击）=“onAddToCart（购买）”中提供单个对象

---

然后在TS上接收它

尝试在通话中提供索引（单击）=“onAddToCart（索引）”并从阵列中获取它

或者在（单击）=“onAddToCart（购买）”中提供单个对象

---

然后在TS上接收它

您可以使用

ngrx/store

处理这种复杂情况您可以使用

ngrx/store

处理这种复杂情况谢谢您的帮助，先生，但是当我尝试从

addItemToCart（）

中删除数组时出现错误，错误是gameBuy类型的

参数不能分配给gameBuy[]类型的参数

，请help@RohitB您需要更改您的

addItemToCart

服务方法：

addItemToCart（game:gameBuy）

是的，先生，我在buyGame服务中更改了此项，但仍显示错误。@rohib抱歉，我错过了

cart

服务，它当然也应该更新。我更新了答案。谢谢您的帮助，先生，但是当我试图从

addItemToCart（）

中删除数组时，我遇到了一个错误，错误是

GameBay类型的参数不能分配给GameBay[]

类型的参数help@RohitB您需要更改

addItemToCart

服务方法：

addItemToCart（game:gameBuy）

是的，先生，我在buyGame服务中更改了此选项，但错误仍然显示。@Rohib抱歉，我错过了

购物车

服务，它当然也应该更新。我更新了答案。