Cómo obtener el valor y el texto en un mat-select de material angular

Ya no necesitas indagar más por todo internet porque estás al espacio justo, tenemos la solución que necesitas pero sin problemas.

Solución:

Actualización: 2020 (Respuesta actualizada según la nueva versión de material angular)

La siguiente respuesta anterior funcionó para el OP en el momento en que se hizo la pregunta. Pero observé comentarios sobre la respuesta anterior y el evento de salida, change de mat-select ha quedado obsoleto en la nueva versión de material angular. Entonces, la respuesta correcta es

Apilamiento de trabajo

HTML:

  
    Great Britain
    United States
    Canada
  

selectionChange nos dará un objeto contiene 2 propiedades value & source

• value mantendrá el valor de la opción seleccionada y
• Para obtener el texto de la opción seleccionada, simplemente puede llamar triggerValue en source como abajo

TS:

selectedValue(event: MatSelectChange) 
  this.selectedData = 
    value: event.value,
    text: event.source.triggerValue
  ;
  console.log(this.selectedData);

---

---

---

Respuesta antigua

Con un evento de cambio normal, puede obtener el valor como se muestra a continuación

En el archivo .html

    
        t.TransactionType
    

En el archivo .ts

selected(event) 
    let target = event.source.selected._element.nativeElement;
    let selectedData = 
      value: event.value,
      text: target.innerText.trim()
    ;
    console.log(selectedData);

Para completar la respuesta anterior, se puede usar viewValue de MatOption. También el compilador de Angular 7 quiere saber si evento.origen.seleccionado debería ser un array o un solo objeto.

selected(event: MatSelectChange) 
  const selectedData = 
    text: (event.source.selected as MatOption).viewValue,
    value: event.source.value
  ;
  console.log(selectedData);

Se puede hacer fácilmente con este código.

HTML

 
                Free Selection
                1 : 1.5 (Recommended)
 

TS angular

  changeRatio(event: MatSelectChange) 
    console.log(event.value);
  

Aquí puedes ver las reseñas y valoraciones de los usuarios

Al final de todo puedes encontrar las reseñas de otros programadores, tú asimismo puedes mostrar el tuyo si lo crees conveniente.

---

---

Utiliza Nuestro Buscador