我似乎无法弄清楚如何轻松地将值设置为选择下拉列表的默认值.
我目前的代码
<select class="form-control" ngControl="modID" #modID="ngForm"> <option *ngFor="let module of modules" [value]="module._id">{{module.moduleName}}</option> </select>
我试过玩[选定]装饰,但无法弄清楚如何让它工作.
鉴于我有这个modInst json对象如下:
{ "_id": 5,"semester": "Tri 3","year": 2018,"__v": 0,"modID": [ { "_id": 6,"moduleLeader": "Jake Groves","moduleName": "Software Implementation","__v": 0 } ] },
我想从所有模块中选择modInst.modID [0] ._ id ._id(模块)是填充选择列表的
这样做的简单方法是什么?
编辑:
我已经尝试添加[selected] =“module._id == modInst.modID [0] ._ id”,但我没有成功,使其成为选定的值
我也试过[ngValue] =“modInst.modID [0] ._ id”,它仍然没有在列表中选择id为6的模块
最后一个添加…我已经尝试了手动“选中”,并且在加载时仍然没有选择值[selected] =“module._id ==’7’”
您可以使用[(ngModel)]执行此操作.
<select [(ngModel)]="selectedModule"> <option *ngFor="let module of modules" [value]="module._id"> {{module.moduleName}}/option> </select>
例如
import { Component } from '@angular/core'; @Component({ selector: 'awesome-component',template: ` <select [(ngModel)]="selectedModule"> <option *ngFor="let module of modules" [value]="module._id"> {{module.moduleName}}/option> </select> ` }) export class AwesomeComponent { modules: any[]; selectedModule: any = null; loadModules(){ //load you modules set selectedModule to the on with the //id of modInst.modID[0]._id you can either loop or use .filter to find it. } }
在组件中从JSON加载模型的位置为selectedModule创建变量,并将值设置为具有匹配ID的模块.有关如何在选择输入上使用ngModel的示例,请参阅此答案:
Binding select element to object in Angular 2
如果您需要根据选择启用/禁用输入等,selectedModule也会反映当前所选项的值.
[value]起作用,因为原始问题是使用数字/字符串id.但是,如果要使用其他类型(如对象),则应使用[ngValue].