Error solving : Getting trouble in services to pass data from one service to another in Angular 2

Question

I am building a web app using Angular 2 but for some reasons I am having trouble with it, I want to pass the data from one service to another using services or from one page to another on clicking a button but I am getting an error which is listed below:

Argument of 'gameBuy[]' is not assignable to parameter of type 'cartModel[]'.

And I am unable to find the reason, also onclicking new lists are added to the other page but data is not getting transfered, Please help.

cart.service.ts file

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

export class cartService{

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

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

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

buyGame.service.ts file:

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",
        "https://vignette.wikia.nocookie.net/gtawiki/images/7/76/CoverArt-GTAV.png/revision/latest?cb=20130826184215")
    ];

    constructor(private cartSer: cartService){}

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

    addItemToCart(game:gameBuy[]){
        this.cartSer.addItem(game); <----Getting Error Here.
    }
}

cart.Model file:

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

buyGame.model.ts file:

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

buyGame.component.ts file:

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'],
  providers: [gameService]
})
export class BuyGameComponent implements OnInit {

   buy:gameBuy[];

  constructor(private service: gameService) { }

  ngOnInit() {
  }

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

}

cart.component.ts file:

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

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

   cart:cartModel[];

  constructor(private service: cartService) { }

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

}

score 0 · Answer 1 · answered Jan 16 '18 at 07:30

0

Typescript was designed to aid a developer in creating type safe code. See this answer on type safety.

What you are trying to do is assign a variable of type gameBuy[] to a variable of type cartBuy[]. gameBuy and cartBy do not have the same type. What would happen if the compiler allowed the assignment and you tried to access the cartName property of gameBuy? You would get undefined.

These are the exact types of errors the Typescript compiler is trying to prevent. The Typescript compiler is telling you that these types are not the same and if you had to follow through with the assignment the result wouldn't be what you expect.

answered Jan 16 '18 at 07:30

bitshift

498
2
13

But why it is not assignable, I have defined both variables with same types in my model. Can you help me find where is the error in my code. – Rohit B Jan 16 '18 at 07:46
As a simple example, in `buyGame` you have a property called `desc` and in `cart` you have a property called `cartDesc` there is no way for the JS runtime to know that you want to assign `buyGame.desc` to `cart.cartDesc`. How does it know that you don't want to assign `buyGame.desc` to `cart.cartName`? As a result, the types are not compatible since they don't have the same interface. – bitshift Jan 16 '18 at 07:50
So if I rename the property names to same, will it solve my problem ? – Rohit B Jan 16 '18 at 08:12
In regular Javascript yes but in typescript no – bitshift Jan 16 '18 at 09:05
So what is the most appropriate solution to this problem in typeScript? – Rohit B Jan 16 '18 at 09:27
Change `onAddToCart` to the following: onAddToCart() { this.service.addItemToCart(this.buy.map(b => new cartModel(b.names, b.desc, b.getImg))); } – bitshift Jan 16 '18 at 09:30

Error solving : Getting trouble in services to pass data from one service to another in Angular 2

1 Answers1