page - angular title service




Angular 4-Finde den ausgewählten Wert im Dropdown-Menü (2)

Ich verwende Angular 4 Reactive Forms, um ein Dropdown zu erstellen

<select id="city" formControlName="city" (change)="onCitySelect($event)" >
    <option *ngFor="let city of cities" [ngValue]="city" >
        {{ city }} 
    </option>
</select> 

Wenn im Dropdown-Menü ein Wert ausgewählt ist, möchte ich eine Methode aufrufen und den ausgewählten Wert anzeigen.

Hier ist mein Code, um dies zu tun

onCitySelect(event) {
    console.log(event.target.value);
}

Ich habe erwartet, dass der Name der Stadt wie im Drop-down-Menü angezeigt wird. Es scheint jedoch, dass es auch die Indexnummer anzeigt. Zum Beispiel,

2: London

Statt nur London das tatsächlich im Dropdown angezeigt wird.

Wie kann ich den Namen der Stadt ohne den Index erhalten?


Da Sie Angular 4 Reactive Forms verwenden, können Sie Folgendes tun:

Nehmen wir an, Sie haben diese Deklaration in Ihrer Typoskript-Datei für Ihre Komponente:

export class myComponent{
    myForm: FormGroup;

    ngOnInit(){
        this.myForm = new FormGroup({
            city: new FormControl('', Validators.required)
        }
    }

    onCitySelect($event:any){
        console.log(this.myForm.controls["city"].value);
    }
}

Sie können also: this.myForm.controls["city"].value um auf den ausgewählten Wert für city zuzugreifen.


Sie können formControl abonnieren, um eine Funktion für Wertänderungen auszulösen und diese somit zu eliminieren

(change)="onCitySelect($event)" 

Du kannst das

this.myForm.get('city').valueChanges.subscribe(value=>{
     console.log(value);
})

Dabei ist "myForm" Ihre formGroup, die formControl "city" hat. Wenn Sie also den Wert console.log () auswählen, müssen Sie kein onChange-Ereignis hinzufügen

anstelle von [ngValue] können Sie auch direkt [value] angeben und welcher Wert Sie hier definieren, wird bei der Änderung angemeldet





angular-reactive-forms