kątowe 2 opcje wyboru wartość domyślna

Question

Nie mogę się domyślić, jak łatwo ustawić wartość jako wartość domyślną dla listy rozwijanej wyboru.

Mój obecny kod

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

Próbowałem grać z wybranego] [dekoratora, ale nie może pracować się, jak zmusić go do pracy.

podane ja to modInst json Przedmiotem poniżej

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

i chciałby modInst.modID [0] ._ id być wybrane spośród wszystkich modules._id (moduły) jest co jest wypełnianie listy wyboru

jakikolwiek łatwy sposób to zrobić?

edit:

Próbowałem dodanie [selected]="module._id == modInst.modID[0]._id" ale ja się na to nie sukces czyni go wybraną wartość

Próbowałem zostały również [ngValue]="modInst.modID[0]._id" i jeszcze nie wybrać moduł z id 6 na liście

jeden ostatni dodatek ... próbowałem podręcznik „wybrany”, a to jeszcze nie czyni wybraną wartość przy obciążeniu [selected]="module._id == '7'"

Answer 1

Możesz użyć [(ngModel)], aby to zrobić.

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

Na przykład

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. 

    } 
} 

Gdzie załadować modele z JSON w składniku utworzyć zmienną dla selectedModule i ustaw wartość równą modułu z identyfikatorem dopasowania. Zobacz tę odpowiedź tutaj przykład jak używać ngModel na wybranej wejścia:

Binding select element to object in Angular 2

także selectedModule będzie odzwierciedlać wartość aktualnie wybranego elementu, jeśli chcesz włączyć/wejść wyłączyć itp na podstawie wyboru .

Plunker example

[wartość] działa ponieważ oryginalne pytanie, używając identyfikatora numer/string. Jednak jeśli chcesz użyć innych typów, takich jak obiekt, powinieneś użyć [ngValue].