javascript - 在 Angular 中使用响应式表单和服务

Question

我正在尝试制作一种deckBuilder，我有一些由卡片制成的卡片和卡片组，这些是卡片和卡片组模型

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

}

我有一个反应式表单，我可以在其中将卡片添加到卡片组中选择卡片，我想使用 newDeck 从表单中保存卡片，然后将 newDeck 推送到卡片组数组中，但是 newDeck 是未定义的，是这是一个绑定问题？这是我使用deckservice的表单.ts文件

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

  }
}

标签： javascriptangulartypescript

Answer 1

经过

newDeck: Deck;

您只需声明成员，但不要初始化它。因此它的值为undefined。利用：

newDeck: Deck = new Deck(....); // .... are correct values according to its constructor.

反而。

另外看看这个：https ://dev.to/satansdeer/typescript-constructor-shorthand-3ibd

deck.service.ts在 stackblitz 的第 23 行内，您可以使用

newDeck: Deck = this.decks[0];

或者，它也会起作用。