Question

我正在使用 Angular 2 构建一个网络应用程序但由于某些原因我遇到了问题，我想将数据从一个服务传递到另一个使用服务或点击按钮从一个页面到另一个页面，但我收到错误，如下所示：

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

我无法找到原因，同时点击新列表也会添加到其他页面但数据未被转移，请帮忙。

cart.service.ts文件

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文件：

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文件：

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

buyGame.model.ts文件：

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

buyGame.component.ts文件：

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文件：

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();
  }

}

Answer 1

Typescript旨在帮助开发人员创建类型安全的代码。请参阅关于类型安全的this答案。

您要做的是将gameBuy[]类型的变量分配给cartBuy[]类型的变量。 gameBuy和cartBy的类型不同。如果编译器允许分配并且您尝试访问cartName的{{1}}属性，会发生什么？你会得到gameBuy。

这些是Typescript编译器试图阻止的确切错误类型。 Typescript编译器告诉你这些类型是不一样的，如果你必须完成赋值，结果将不是你所期望的。

解决问题：在Angular 2

1 个答案: