Angular 2选择选项默认值

Question

我似乎不知道如何轻松地将一个值设置为选择下拉列表的默认值。

我当前的代码

<select class="form-control" ngControl="modID" #modID="ngForm">
       <option *ngFor="let module of modules" [value]="module._id">{{module.moduleName}}</option>
</select>

我试过使用 [selected] 装饰器，但不知道如何让它工作。

假设我在下面有这个 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 也会反射(reflect)当前所选项目的值。

Plunker example

[value] 有效，因为原始问题使用的是数字/字符串 id。但是，如果您想使用其他类型，例如对象，您应该使用 [ngValue]。