Angular 2: Wie man mit * ngif in Option umgehen kann Wählen Sie

Question

Wie kann ich * ngif verwenden, um eine bestimmte voreingestellte ausgewählte Option zu setzen?

Ich muss Daten aus der Datenbank zur Bearbeitung neu laden, wenn ich Daten abrufe, muss ich den Standardwert der Option in der Basis einen gespeicherten Wert setzen.

Ich habe dies:

<select class="form-control" id="deviceModel"> 
     <option value="">Select a category</option> 
     <option *ngFor='let element of category'*ngIf="{{element}}==={{nameDevice}}" value="{{element}}">{{element}}</option>  
    </select> 

Vielen Dank im Voraus.

Answer 1

ngIf ist für strukturelle Manipulation, im Grunde, ob etwas im DOM ist, oder entfernt. Wenn Sie auf die ausgewählte Eigenschaft binden möchten, könnten Sie verwenden:

<select class="form-control" id="deviceModel"> 
    <option value="">Select a category</option> 
    <option *ngFor='let element of category' [selected]="element === nameDevice" [value]="element">{{element}}</option>  
</select> 

Von https://angular.io/docs/ts/latest/api/forms/index/SelectControlValueAccessor-directive.html:

Wenn Ihre Optionswerte einfache Strings sind, können Sie in den normalen Werteigenschaft auf die Option binden können . Wenn Ihre Optionswerte Objekte sind (und Sie die Auswahl in Ihrem Formular als Objekt speichern möchten), verwenden Sie stattdessen ngValue.

Wenn Sie ngModel Bindung verwenden möchten, haben Sie einen Blick auf Binding select element to object in Angular 2

Beachten Sie, dass bei der Verwendung von Eigentum Bindung, die Sie nicht/nicht-String Interpolation

Answer 2

verwenden würde ich Ihnen empfehlen tun Sie es in der ts oder js-Datei hängt davon ab, dass Sie Typoskript oder Javascript verwenden.

Ich nehme an, wenn Sie Daten aus der Datenbank laden, indem Sie eine Ajax-Anfrage an die API senden? Verwenden ngModel die Daten (selectedValue in diesem Fall) zu binden, in template

<select [(ngModel)]="selectedValue"> 
    <option *ngFor="let c of category" [ngValue]="c">{{c.name}}</option> 
</select> 

und stellen

this.selectedValue = response.value; 

in der Rückruf-Funktion.