选择框值未在DOM中更新

Question

在component.ts中更改值后，选择框DOM值不更新。

请检查以下代码。

    <form class="form-horizontal aformgroups" [formGroup]="PurchaseForm"  autocomplete="off">    
    <select class="selectpicker form-control" name="FolioNumberDDl" formComtrolName="FolioNumberDDl">
<option *ngFor="let i of FolioNumberData" [ngValue]="i">{{i}}</option>
</select>
<input type="radio" (change)="changeSelectValue()" />Change Value
</form>


export class AppComponent  {
  name = 'Angular';
  PurchaseForm;

  FolioNumberData: any = [];

  ngOnInit() {
        this.FolioNumberData = ["Select", "1234", "3256", "5643", "5555"]

    this.PurchaseForm = new FormGroup({
      FolioNumberDDl: new FormControl({ value: '1234'})
    });
    this.PurchaseForm.controls.FolioNumberDDl.setValue("1234")
  }
  changeSelectValue(){
    this.PurchaseForm.controls["FolioNumberDDl"].setValue("1234");
    console.log(this.PurchaseForm.controls.FolioNumberDDl.value, "this.PurchaseForm.controls.FolioNumberDDl.value");
  }

Stackblitz：https://stackblitz.com/edit/angular-d3gpku

我在此上浪费了很多时间。有人可以帮我吗。

Answer 1

您有错字：

formComtrolName="FolioNumberDDl"
      ^
fomrControlName

Forked Stackblitz