Question

我想在选择下拉列表中添加双向数据绑定。但由于dropDown数组不是对象。它工作不正常。如何在下拉列表中设置双向数据绑定。在此代码中，将在下拉列表中显示的数据来自数组形式的服务。在哪个ng for循环并显示输出。但我想在＆lt; select＆gt;中的下拉列表中添加双向数据绑定标签。由于数据是数组的形式，我无法以双向绑定方式使用它。怎么做＆lt; div class =＆＃34; form-group＆＃34;＆gt; ＆lt; label for =＆＃34; sel1＆＃34; class =＆＃34; col-sm-2 control-label＆＃34;＆gt;选择课程＆lt; / label＆gt; ＆lt; div class =＆＃34; col-sm-10＆＃34;＆gt; ＆lt; select class =＆＃34; form-control＆＃34; ID =＆＃34; SEL1＆＃34;＆GT; ＆lt; option * ngFor =＆＃34; let dropDownArr＆＃34; [（ngModel）] =＆＃34; data.course＆＃34; [ngModelOptions] =＆＃34; {standalone：true}＆＃34; ngDefaultControl＆GT; {{data.course}}＆LT; /选项＆GT; ＆LT; /选择＆GT; ＆LT; / DIV＆GT; ＆LT; / DIV＆GT; // APP COMPONENT TS 从＆＃39; @ angular / core＆＃39;中导入{Component，OnInit}; 从＆＃39; ./ drop-down.service＆＃39;中导入{DropDownService}; @零件（{ 选择器：＆＃39; app-root＆＃39;， templateUrl：＆＃39; ./ app.component.html＆＃39;， styleUrls：[＆＃39; ./ app.component.css＆＃39;]，提供者：[DropDownService] }） export class AppComponent实现OnInit { dropDownArr = []; onSubmit（event：Event）{ event.preventDefault（）; } 构造函数（public dropdown：DropDownService）{ } ngOnInit（）{ this.dropDownArr = this.dropdown.getData（）; } } //服务TS 从＆＃39; @ angular / core＆＃39;中导入{Injectable}; @Injectable（） export class DropDownService { 课程：{course：string} [] = [ {课程：＆＃39;移动开发＆＃39; }， {课程：＆＃39;网络开发＆＃39; }， {课程：＆＃39; IOS开发＆＃39; }， {课程：＆＃39; Android开发＆＃39; } ]。 getData（）{ 返回这个课程; } setData（obj：{course：string}）{ this.courses.unshift（OBJ）; } 构造函数（）{} }

Answer 1

将[(ngModel)]添加到select本身，然后将其从option中删除。将ngModel添加到option是没有意义的。相反，您需要设置选项的[value]属性。

<select class="form-control" id="sel1" [(ngModel)]="selectedItem">
    <option *ngFor="let data of dropDownArr"  [value]="data.course" [ngModelOptions]="{standalone: true}" ngDefaultControl>{{data.course}}</option>          
</select>

组件

export class AppComponent implements OnInit {
  dropDownArr = [];
  selectedItem;

  onSubmit(event: Event) {
    event.preventDefault();
  }
  constructor(public dropdown: DropDownService) {
  }

  ngOnInit() {
       this.dropDownArr = this.dropdown.getData();
  }
}

Answer 2

您需要将[(ngModel)]放在选项上而不是选项上。然后它将获取所选选项的值。

然而，您目前正在尝试做什么并不合理。您希望ngModel映射到单独的值（让我们称之为selectedCourse）来表示所选项目。然后你有类似的东西：

<select class="form-control" id="sel1"  [(ngModel)]="selectedCourse"
                [ngModelOptions]="{standalone: true}" ngDefaultControl>
  <option *ngFor="let data of dropDownArr" [value]="data.course">{{data.course}}</option>          
</select>

Answer 3

您可以将初始值传递给select并像这样填充options，

<select class="form-control" id="sel1" [(ngModel)]="dropDownArr[0].course">
 <option *ngFor="let data of dropDownArr" [value]="data.course" ngDefaultControl>{{data.course}}</option>          
</select>

修改

由于您提到它是一个模板驱动表单，您还需要向name标记
添加select属性
<select class="form-control" name="sel1" id="sel1" ngModel> <option value="" disabled>Choose a state</option> <option *ngFor="let data of dropDownArr" [value]="data.course" ngDefaultControl>{{data.course}}</option> </select>

有关详细信息，请参阅this

如何在角度2+中添加双向绑定到非输入元素，如<select>

3 个答案: