теги select и option в Angular реактивных формах

Question

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

Это мой файл .ts

@Component({
  selector: 'app-create-deck',
  templateUrl: './create-deck.component.html',
  styleUrls: ['./create-deck.component.scss']
})
export class CreateDeckComponent implements OnInit {

  classes: ['Priest', 'Mage', 'Shaman', 'Rogue', 'Warrior', 'Warlock', 'Druid', 'Paladin']
  createDeckForm: FormGroup;

  constructor() { }

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

это правильный путь для l oop над элементом массива?

А это. html

<div class="container">
  <div class="row">
    <form [formGroup]="createDeckForm" (ngSubmit)="onSubmit()">
      <label for="deckName">Deck Name</label>
      <input
        type="text"
        id="deckName"
        formControlName="deckName"
        class="form-control"
      />

      <label for="chooseClass">Deck class</label>
      <select id="chooseClass" name="chooseClass">
        <option
            *ngFor="let class of classes"
            [value]="class">
            {{class}}
      </option>
      </select>
    </form>
  </div>
</div>

что я делаю не так?

Answer 1

Проблема заключается в том, что вы используете декальный тип вместо присвоения значения вашему массиву.

Измените это

classes: ['Priest', 'Mage', 'Shaman', 'Rogue', 'Warrior', 'Warlock', 'Druid', 'Paladin']

На это

classes= ['Priest', 'Mage', 'Shaman', 'Rogue', 'Warrior', 'Warlock', 'Druid', 'Paladin']

Или это

classes:[] = ['Priest', 'Mage', 'Shaman', 'Rogue', 'Warrior', 'Warlock', 'Druid', 'Paladin']

Рабочий пример