Я пытаюсь создать своего рода колоду, у меня есть несколько карт и колоды, сделанные из карт, это карты и колода моделей
export class Card {
public name: string;
public manaCost: number;
public imagePath: string;
constructor(name: string, manaCost: number, imagePath: string) {
this.name = name;
this.manaCost = manaCost;
this.imagePath = imagePath;
}
}
и колода
import { Card } from '../card/card.model';
export class Deck {
public deckName: string;
public deckClass: string;
public deckCards: Card[];
constructor(deckName: string, deckClass: string, deckCards: Card[]) {
this.deckName = deckName;
this.deckClass = deckClass;
this.deckCards = deckCards;
}
}
это файл deckService
import { Deck } from './deck.model';
import { Card } from '../card/card.model';
export class DeckService {
decks: Deck[] = [
new Deck("Control Priest", "Priest", [
new Card("Reno Jackson", 6, "../../assets/img/Reno_Jackson.png"),
new Card("Abomination", 5, "../../assets/img/Abomination.png"),
new Card("Blade Flurry", 4, "../../assets/img/Blade_Flurry.png"),
new Card("Felfire Potion", 6, "../../assets/img/Felfire_Potion.png")
]),
new Deck("Big Spell Mage", "Mage", [
new Card("Reno Jackson", 6, "../../assets/img/Reno_Jackson.png"),
new Card("Abomination", 5, "../../assets/img/Abomination.png"),
new Card("Blade Flurry", 4, "../../assets/img/Blade_Flurry.png"),
new Card("Felfire Potion", 6, "../../assets/img/Felfire_Potion.png")
])
];
newDeck: Deck; // this is undefined when i try to log it
constructor() {
}
getDecks() {
return this.decks.slice();
}
addCard(card: Card){
console.log(this.newDeck) // why can't access to newDeck? i have to
// bind this function? if i log 'this'
// i get DeckService as expected
this.newDeck.deckCards.push(card);
}
addNewDeck(deck: Deck){
console.log(this.decks);
this.decks.push(deck);
};
}
у меня есть реактивная форма, в которой я могу добавлять карты в колоду, выбирая карту с выбором, я хочу использовать новую деку для сохранения карт из формы и затем pu sh newDeck в массиве decks, но newDeck не определен, это проблема связывания? это файл формы .ts, где я использую deckservice
import { Deck } from './../deck/deck.model';
import { DeckService } from "./../deck/deck.service";
import { Component, OnInit } from "@angular/core";
import { FormArray, FormControl, FormGroup, Validators } from "@angular/forms";
import { CardService } from "../card/card.service";
import { Card } from "../card/card.model";
import { Observable } from "rxjs";
@Component({
selector: "app-create-deck",
templateUrl: "./create-deck.component.html",
styleUrls: ["./create-deck.component.scss"]
})
export class CreateDeckComponent implements OnInit {
cards: Card[];
classes = [
"Priest",
"Mage",
"Shaman",
"Rogue",
"Warrior",
"Warlock",
"Druid",
"Paladin"
];
createDeckForm: FormGroup;
deckName: FormControl;
constructor(
private cardService: CardService,
private deckService: DeckService
) {}
ngOnInit() {
this.cards = this.cardService.getCards();
this.createDeckForm = new FormGroup({
deckName: new FormControl("Meme Deck"),
deckClass: new FormControl(),
deckCards: new FormControl()
});
}
onAddCard(){
this.deckService.addCard(this.createDeckForm.value); //this is wrong but the problem is that i can't access to newDeck
}
onSubmit() {
this.deckService.addNewDeck(this.createDeckForm.value);
}
}