angular 2选择选项默认值

前端之家收集整理的这篇文章主要介绍了angular 2选择选项默认值前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我似乎无法弄清楚如何轻松地将值设置为选择下拉列表的默认值.

我目前的代码

<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也会反映当前所选项的值.

Plunker example

[value]起作用,因为原始问题是使用数字/字符串id.但是,如果要使用其他类型(如对象),则应使用[ngValue].

猜你在找的Angularjs相关文章