Использование реактивных форм в Angular с сервисами - PullRequest
0 голосов
/ 27 марта 2020

Я пытаюсь создать своего рода колоду, у меня есть несколько карт и колоды, сделанные из карт, это карты и колода моделей

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

  }
}

Ответы [ 2 ]

1 голос
/ 27 марта 2020

К

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 в строке 23 в stackblitz вы можете использовать

newDeck: Deck = this.decks[0];

в качестве альтернативы, и это будет работать тоже.

0 голосов
/ 27 марта 2020

спасибо, я не знаю, должен ли я открыть другой вопрос, но у меня есть другая проблема, это. html формы



<div class="container">
  <div class="row">
    <form [formGroup]="createDeckForm" (ngSubmit)="onSubmit()">

      <label >Deck Name</label>
      <input
        type="text"
        id="deckName"
        formControlName="deckName"
        class="form-control"
      />
      <p>

      </p>
      <hr>
      <label for="deckClass">Deck class</label>
      <select id="deckClass" formControlName="deckClass">
        <option
            *ngFor="let class of classes"
            [value]="class">
            {{class}}
      </option>
      </select>
      <hr>
      <label for="deckCards">Select a Card</label>
      <select formControlName = "deckCards" id="deckCards" name="deckCards">
        <option
            *ngFor="let card of cards"
            [ngValue]="card">
            {{card.name}}
      </option>
    </select>

      <button (click) = "onAddCard()" class="btn btn-primary">Add Card</button>
      <hr>
      <button class="btn btn-primary" type="submit">Submit</button>

    </form>
  </div>
</div>

У меня есть 2 кнопки, одна для добавления карты в колоду и на OnSubmit, чтобы добавить колоду в массив колоды, но когда я нажимаю на карту addCard, это похоже на нажатие кнопки отправки

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...