Question

我似乎无法弄清楚如何轻松地将值设置为选择下拉列表的默认值。

我当前的代码

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

时仍然没有选择值

Answer 1

您可以使用[（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]。

angular 2选择选项默认值

1 个答案: