açısal 2 seçim seçenekleri varsayılan değer

Question

Seçimi açılan listenin varsayılan değeri olarak kolayca nasıl ayarlayacağınızı anlayamıyorum.

Benim şu anki kod

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

i [seçilen] dekoratör ile oynarken denedim ama işe almak için nasıl çalışamaz.

i aşağıdaki Bu modInst json nesnesi, verilen: seçim listesini doldurma whats modInst.modID [0] ._ id istiyoruz

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

tüm modules._id (modüller) arasından seçilecektir

Bunu yapmanın kolay bir yolu nedir?

düzenleme:

i [selected]="module._id == modInst.modID[0]._id" ekleyerek denedim ama bunu ben de [ngValue]="modInst.modID[0]._id" denedim seçilen değeri

yapma Üstünde başarı elde ve hala birlikte modülü seçmez listede kimliği 6

son bir ekleme ... i manuel 'seçilmiş' ve hala yük üzerine seçilen bir değeri yapmaz denedim [selected]="module._id == '7'"

Answer 1

Bunu yapmak için [(ngModel)] kullanabilirsiniz. Eğer selectedModule için bir değişken oluşturmak için bileşeninde JSON'dan modelleri yüklemek ve eşleştirme kimliği ile modüle eşit değeri

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. 

    } 
} 

Örneğin

için

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

. Eğer bir seçime dayanarak vb devre dışı girişleri etkinleştirmeniz gerekir/eğer

Binding select element to object in Angular 2

Ayrıca selectedModule anda seçili öğenin değerini yansıtacaktır: seçilmiş bir girişi ngModel nasıl kullanılacağına ilişkin bir örnek için burayı bu yanıta bakın . Orijinal soru numarası/dize kimliği kullanarak beri

Plunker example

[değer] çalışır. Ancak, nesne gibi diğer türleri kullanmak isterseniz [ngValue] kullanmalısınız.