Angular 下拉列表值未在模板驱动表单中注册

我在模板驱动表单中有一个select下拉列表，它的值是使用*ngFor动态生成的：

<form class="col-md-5 location-seachform" name="loctionForm" #f="ngForm" (ngSubmit)="onSubmit(f);" novalidate  >
   <select class="form-control" name="somename" ngModel >
     <option [value]="ii" [attr.selected]="ii==0 ? '' : null" *ngFor="let loc_crit of objectKeys(somecriteria); let ii= index"> {{somecriteria[loc_crit] }} 
     </option>
   <select>
<button class="btn btn--filled pull-right" type="submit"><span class="btn__copy"><span class="btn__label">Search</span></span></button>
</form>

{{somecriteria[loc_crit]}
搜寻

现在的问题是，尽管我使用了

[attr.selected]=“ii==0？”：空”

第一个选项在chrome调试器中显示为选中，但默认情况下第一个选项未选中。单击submit按钮时显示的对象也未显示默认值。对象是这样的：

{somename:''}

而它应该是

{somename:'firstValue'}

您可以使用

[（ngModel）]=“已选择”

.ts

.html

{{somecriteria[loc_crit]}
搜寻

角度窗体只查看formcontrol值，在本例中，您已使用值

“”

（空字符串）注册了formcontrol，因此数据中不存在此类值。如果希望预先选择第一个选项，可以通过设置

[ngModel]=“0”

来解决此问题。您还需要将

[value]

更改为

[ngValue]

，因为

value

只捕获字符串，而

ngValue

接受数字、对象。当然，除非您希望它是一个字符串，否则请使用

[ngModel]=“0”

。因此，总而言之，请执行以下操作（第一个选项）：

{{somecriteria[loc_crit]}

还可以添加ts。请在更改事件中尝试Consoleo.log。(

selected = this.somecriteria[Object.keys(this.somecriteria)[0]];

objectKeys(data) {
  return Object.keys(data);
}

onFormSubmit(formValue) {
  console.log(formValue);
}

<form #myForm="ngForm" (ngSubmit)="onFormSubmit(myForm.value)">
    <select class="form-control" name="somename" [(ngModel)]="selected" >
    <option  *ngFor="let loc_crit of objectKeys(somecriteria); let ii= index"> 
       {{somecriteria[loc_crit] }} 
    </option>
</select>
    <button class="btn btn--filled pull-right" type="submit"><span class="btn__copy"><span class="btn__label">Search</span></span></button>
</form>