angular 2 선택 옵션 기본값

Question

선택 드롭 다운 목록의 기본값으로 값을 쉽게 설정하는 방법을 모르겠습니다.

내 현재 코드는

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

나는 [선택] 장식을 가지고 노는 시도했지만 그것이 작동하는 방법을 알아 작동하지 않을 수 있습니다.

i가 이하 본 modInst의 JSON 객체 한 주어진 다음 선택리스트를 채우는 뭐죠 내가 modInst.modID [0] ._ ID를 원하는

{ 
"_id": 5, 
"semester": "Tri 3", 
"year": 2018, 
"__v": 0, 
"modID": [ 
    { 
    "_id": 6, 
    "moduleLeader": "Jake Groves", 
    "moduleName": "Software Implementation", 
    "__v": 0 
    } 
] 
}, 

모든 modules._id (모듈)로부터 선택 될

이 작업을 수행하는 쉬운 방법은 무엇입니까?

편집 :

내가 [selected]="module._id == modInst.modID[0]._id"를 추가하려고했습니다하지만 난 그것을 나는 또한 [ngValue]="modInst.modID[0]._id"을 시도했다 선택된 값

을 그 위에 더 성공을 얻을 수없고, 여전히 함께 모듈을 선택하지 않습니다 목록에서 ID 6

마지막뿐만 아니라 ... 내가 수동이 '선택'과 여전히 부하에 선택된 값을하지 않습니다 시도했습니다 [selected]="module._id == '7'"

Answer 1

[(ngModel)]을 사용하면이 작업을 수행 할 수 있습니다. 는 selectedModule 대한 변수를 생성하여 컴포넌트에 JSON의 모델을로드하고 정합 모듈 ID와 동일한 값을 설정

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. 

    } 
} 

예를 들어

<select [(ngModel)]="selectedModule"> 
    <option *ngFor="let module of modules" [value]="module._id"> {{module.moduleName}}/option> 
    </select> 

. 당신이 선택에 따라 등 비활성화 입력을 활성화해야/경우

Binding select element to object in Angular 2이

는 또한 selectedModule 현재 선택된 항목의 값을 반영합니다 : 선별 된 입력에 ngModel을 사용하는 방법의 예를 들어 여기이 답변을 참조하십시오 . 원래의 문제가 숫자/문자열 ID를 사용하고 있기 때문에

Plunker example

[값] 작동한다. 그러나 객체와 같은 다른 유형을 사용하려면 [ngValue]를 사용해야합니다.