Standardwert Auswahlliste nicht modellieren auf init

Question

gebunden

So habe ich dieses Array in meiner Komponente: vehicleTypes = ['Bicycle', 'Car', 'Motorcycle', 'Van'];

Und ich erzeugen, um den Drop-Down-HTML mit:

<select id="vehicletype" class="form-control" [(ngModel)]="selectedVehicleType" > 
    <option *ngFor="let vt of vehicleTypes; let i = index" [selected]="i === 0">{{ vt }}</option> 
</select> 

Wie verwalte ich die bekommen Wert in selectedVehicleType gespeichert, wenn die Seite geladen ist? Jetzt wird nur der erste Wert in der Dropdown-Liste angezeigt, aber selectVehicleType ist undefined. Ich muss zuerst einen anderen Wert auswählen, bevor er in selectVehicleType gespeichert wird.

Bitte beachten Sie, dass ich weiß, dass es manuell in der Komponente zugewiesen wird, aber ich würde gerne wissen, ob es einen anderen Weg im HTML gibt. Ich möchte nicht jedes Mal zusätzliche Codezeilen in meine Komponente schreiben, wenn ich ein Dropdown benötige.

Answer 1

Es gibt keine Möglichkeit, den Standardwert des Modells festzulegen, da es die selected Attributbindung außer Kraft setzt. Außerdem würde ich vorschlagen, die Wertbindung des Optionselementes zu verwenden.

<select id="vehicletype" class="form-control" [(ngModel)]="selectedVehicleType" > 
    <option *ngFor="let vt of vehicleTypes; let i = index" [value]="vt">{{ vt }}</option> 
</select> 

Und in Ihrer Komponente können Sie die Deklaration kombinieren und in eine Zeile einstellen, so dass es nicht mehr Code hinzufügen, als es in der Vorlage setzen würde:

selectedVehicleType: string = vehicleTypes[0];