navigationend - Angular 4: encuentra el valor seleccionado en el menú desplegable

router events subscribe angular 4

Question

Estoy usando Angular 4 Reactive Forms para crear un menú desplegable

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

Cuando se selecciona un valor en el menú desplegable, quiero llamar a un método y mostrar el valor seleccionado.

Aquí está mi código para hacer esto

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

Esperaba que imprimiera el nombre de la ciudad como se muestra en el menú desplegable. Sin embargo, parece que también muestra el número de índice. Por ejemplo,

2: London

En lugar de solo London que en realidad se muestra en el menú desplegable.

¿Cómo puedo obtener el nombre de la ciudad sin el índice?

Answer 1

Como está utilizando Angular 4 Reactive Forms, puede hacer lo siguiente:

Digamos que tiene esta declaración en su archivo de texto mecanografiado para su componente:

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);
    }
}

Entonces puede usar: this.myForm.controls["city"].value para acceder al valor seleccionado para city .

Answer 2

Puede suscribirse a formControl para activar una función en el cambio de valor y, por lo tanto, eliminar esto

(change)="onCitySelect($event)" 

Puedes hacerlo

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

donde ''myForm'' es su formGroup que tiene formControl ''city'' así que cada vez que seleccione valor console.log () ocurrirá, por lo tanto, no es necesario agregar el evento de cambio

también en lugar de [ngValue] puede dar directamente [value] y cualquier valor que defina aquí se iniciará en el cambio

Answer 3

Use [value] lugar de [ngValue] si tiene una cadena o número como valor de opción y no quiere usar [(ngModel)]="..." .

Para valores de objeto, siempre deberías usar [ngValue] .