javascript - Angular react 形式中的选择和选项标签

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

这是循环数组元素的正确方法吗？

这是 .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']

工作中example