Question

我有一个模板驱动形式的选择下拉列表，其值是使用* 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>

现在的问题是，即使我使用了

，下拉列表和单击提交按钮时正在控制台登录的对象都没有显示select的默认值。

[attr.selected]="ii==0 ? '' : null"

，并且第一个选项在chrome调试器中显示为选中状态，但默认情况下未选中第一个选项。单击“提交”按钮时显示的对象也不显示默认值。对象是这样的： {somename:''}

它应该是 {somename:'firstValue'}

Answer 1

您可以使用[(ngModel)]="selected"

Working Demo

.ts

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

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

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

.html

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

Answer 2

角度表单仅查看formcontrol的值，在这种情况下，您已经使用值""（空字符串）注册了formcontrol，因此数据中不存在这样的值。如果希望预先选择第一个选项，可以通过设置[ngModel]="0"来解决。另外，您需要将[value]更改为[ngValue]，因为value仅捕获字符串，而ngValue接受数字，对象。除非您当然想要将其作为字符串，否则请使用[ngModel]="'0'"。所以总而言之，做（第一个选项）：

<select name="somename" [ngModel]="0">
 <option [ngValue]="ii" *ngFor="let loc_crit of objectKeys(somecriteria); let ii = index"> 
   {{somecriteria[loc_crit] }} 
 </option>
</select>

下拉值未以模板驱动的形式注册

2 个答案: