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

我有一个反应式表格，用户可以在其中选择牌组名称，牌组类别和牌组卡片这些是.ts和.html文件

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

  ngOnInit(){

    this.cards = this.cardService.getCards();
    //console.log(this.cards);

    this.createDeckForm = new FormGroup({
      'deckName': new FormControl('Meme Deck'),
      'chooseClass': new FormControl(),
      'chooseCard': new FormControl(),
    });
  }
  onSubmit() {
    console.log(this.createDeckForm.value);
    //this.createDeckForm.reset();
  }

}

和.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="chooseClass">Deck class</label>
      <select id="chooseClass" formControlName="chooseClass">
        <option
            *ngFor="let class of classes"
            [value]="class">
            {{class}}
      </option>
      </select>
      <hr>
      <label for="chooseCard">Select a Card</label>
      <select formControlName = "chooseCard" id="chooseCard" name="chooseCard">
        <option
            *ngFor="let card of cards"
            [value]="card">
            {{card.name}}
      </option>
    </select>

      <hr>
      <button class="btn btn-primary" type="submit">Submit</button>

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

现在我只有一个选择，可以选择一张卡片，但是当我在控制台中按下提交按钮登录卡片时，输出为（console.log（this.createDeckForm.value）;）。像这样的东西：

{deckName: "Meme Deck", chooseClass: "Rogue", chooseCard: "[object Object]"}
deckName: "Meme Deck"
chooseClass: "Rogue"
chooseCard: "[object Object]"

如果我像这样[value] =“ card.name”在html中设置值，则我会正确记录卡的名称，但是我需要将整个卡对象作为一个值接收，以将卡添加到牌组中后来，我在做什么错？

角反应形式的对象

0 个答案: