Angular 7 y material angular cómo obtener el texto de la opción seleccionada de mat-select en lugar de su valor

Solución:

Perdón por llegar tarde a la fiesta. Estoy realmente horrorizado de leer todas las respuestas anteriores …

La solución es mucho más fácil y directa que cualquiera de las respuestas propuestas, ya que el componente seleccionado simplemente pasa el modelo seleccionado como parte del selectionChange argumento.

Pero primero, algunas correcciones a su ejemplo. Has declarado una interfaz, así que ÚSALA:

export interface FamilyRelation {
    id: number;
    type: string;
}

Entonces, en tu constructor:

 constructor() {
    this.familyRelationArray=[
    {
      id: 1,
      type: 'Parent'
    },
    {
      id: 2,
      type: 'Sister'
    }
  ]
}

y no lo que pones en tu StackBlitz … Entonces tu vista se convertirá en esto:

<mat-select (selectionChange)="onChange($event)" id="family_relation" placeholder="Family Relation">
    <mat-option *ngFor="let familyRelation of familyRelationArray;" [value]="familyRelation.id">
        {{familyRelation.type}}
    </mat-option>
</mat-select>

No es necesario el controlador (clic) para cada opción de tapete, ya que no es necesario y podría provocar problemas de rendimiento si tiene muchas opciones. Ahora, en el controlador:

onChange(ev: any) {
   let optionText = ev.source.selected.viewValue;
   console.log(optionText);
}

o, si lo prefiere, la variante escrita:

onChange(ev: MatSelectChange) {
   let optionText = (ev.source.selected as MatOption).viewValue;  //use .value if you want to get the key of Option
   console.log(optionText);
}

pero no olvides las importaciones …

import { MatSelectChange } from '@angular/material/select';
import { MatOption } from '@angular/material/core';

Puede agregar index to loop con mat-option y luego pasarlo al método onChange () y le permitirá obtener el elemento seleccionado de la matriz.

<mat-select #familyRelation (selectionChange)="onChange($event.value, element, i, 'hh')" id="family_relation" placeholder="Family Relation">
    <mat-option *ngFor="let familyRelation of familyRelationArray; let i=index" [value]="i">
        {{familyRelation.family_relation_type}}
    </mat-option>
</mat-select>

 onChange(index, data, i, type) {
    console.log(this.familyRelationArray[index].family_relation_type);
}

Aquí tienes el código de actualización: enlace

Actualizó el código y agregó click evento en el options

https://stackblitz.com/edit/angular-material-w89kwc?embed=1&file=app/app.component.ts

Añadida una función

  getInnerText(innerText){
    console.log(innerText)
  }

Evento de clic agregado a la vista

<mat-option *ngFor="let familyRelation of familyRelationArray;" [value]="familyRelation.family_relation_id" (click)="getInnerText(familyRelation.family_relation_type)">
    {{familyRelation.family_relation_type}}
</mat-option>

---

---

Utiliza Nuestro Buscador