angular 2 Optionen auswählen Standardwert

Question

Ich kann nicht herausfinden, wie einfach ein Wert als Standardwert für eine Dropdown-Liste ausgewählt werden kann.

Mein aktueller Code

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

i mit dem [ausgewählt] Dekorateur gespielt haben versucht, aber nicht herausfinden können, wie man es an die Arbeit.

gegeben Ich habe dieses modInst json Objekt unter:

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

i die modInst.modID [0] ._ id möchte von allen modules._id (Module) ausgewählt werden soll, was die Auswahlliste bevölkern

eine einfache Möglichkeit, dies zu tun?

edit:

habe ich versucht, das Hinzufügen [selected]="module._id == modInst.modID[0]._id" aber ich bekomme keinen Erfolg auf, um es den ausgewählten Wert

ich, damit ich auch [ngValue]="modInst.modID[0]._id" habe versucht, und es funktioniert immer noch nicht wählen Sie das Modul mit id 6 in der Liste

eine letzte Zugabe ... ich habe ein Handbuch versucht, ‚ausgewählt‘ und es immer noch nicht einen ausgewählten Wert bei Belastung machen [selected]="module._id == '7'"

Answer 1

Sie können dazu [(ngModel)] verwenden.

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

Zum Beispiel

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. 

    } 
} 

Wo Sie die Modelle von JSON in Ihrer Komponente eine Variable für die selectedModule erstellen laden und den Wert gleich das Modul mit der entsprechenden ID eingestellt. Sehen Sie diese Antwort hier für ein Beispiel dafür, wie ngModel auf einem Auswahleingang zu verwenden:

Binding select element to object in Angular 2

Auch selectedModule den Wert des aktuell ausgewählten Elements reflektieren, wenn Sie aktivieren müssen/deaktivieren Eingänge usw. basierend auf einer Auswahl .

Plunker example

[Wert] arbeitet, da die ursprüngliche Frage eine Reihe/string-ID verwendet. Wenn Sie jedoch andere Typen wie ein Objekt verwenden möchten, sollten Sie [ngValue] verwenden.