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

這是循環數組元素的正確方法嗎？

這是.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

問題是您對類型進行了 decalre 類型而不是為數組分配值。

改變這個

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']

一個工作示例