javascript - 如何使用 react 形式设置选择值并循环遍历数组

Question

我正在尝试动态设置选择值，但即使使用检测更改也不会反射(reflect)更改。

组件:

export class AppComponent implements OnInit {

  constructor(private cd: ChangeDetectorRef) {

  }
  genders=['male','female'];
  SignupForm:FormGroup;

  ngOnInit(){
    this.SignupForm = new FormGroup({
      'gender':new FormControl(),
    });
  }

  onSubmit(){
    console.log(this.SignupForm);
  }

  setGender() {
    this.SignupForm.controls.gender.setValue(this.genders[1]);
    console.log(this.SignupForm.controls.gender.value);
    this.cd.detectChanges();
  }
}

模板:

<div class="container">
    <div class="row">
        <div class="col-xs-12 col-sm-10 col-md-8 col-md-offset-2 col-sm-offset-1">
            <form [formGroup]="SignupForm" (ngSubmit)="onSubmit()">
                <select fromControlName="gender">
         <option *ngFor="let g of genders">{{g}}</option>
       </select>

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

<button class="btn btn-primary" (click)="setGender()">Set Female</button>

Stackblitz

Answer 1

你有一个很小的错误，见:

<select fromControlName="gender">

更改方式:

<select formControlName="gender">