कोणीय 2 चयन विकल्प डिफ़ॉल्ट मान

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] ._ आईडी चाहते हैं सभी modules._id (मॉड्यूल) से चुना जा रहा है क्या चयन सूची को पॉप्युलेट

ऐसा करने का कोई आसान तरीका है?

संपादित करें:

मैं [selected]="module._id == modInst.modID[0]._id" जोड़ने की कोशिश की है, लेकिन मैं यह चयनित मूल्य

मैं भी [ngValue]="modInst.modID[0]._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. 

    } 
} 

कहाँ selectedModule के लिए एक चर बनाने के अपने घटक में मॉडल JSON से लोड और मूल्य मिलान आईडी के साथ मॉड्यूल के बराबर सेट के लिए

।

Binding select element to object in Angular 2

इसके अलावा selectedModule वर्तमान में चयनित आइटम के मूल्य को प्रतिबिंबित करेगा अगर आप एक चयन के आधार पर सक्षम करने की आवश्यकता/अक्षम आदानों आदि: यहाँ कैसे एक का चयन इनपुट पर ngModel का उपयोग करने का एक उदाहरण के लिए इस उत्तर देखें ।

Plunker example

[value] के बाद से मूल प्रश्न एक नंबर/स्ट्रिंग आईडी का उपयोग कर रहा है काम करता है। हालांकि यदि आप अन्य प्रकारों जैसे किसी ऑब्जेक्ट का उपयोग करना चाहते हैं तो आपको [ngValue] का उपयोग करना चाहिए।