Угловой 7 и угловой материал, как получить выбранный вариант текста Mat-Select вместо его значения

Question

Мне нужно получить выбранный текст выпадающего списка материала <mat-select> вместо его значения:

<ng-container matColumnDef="fr">
        <th mat-header-cell *matHeaderCellDef> Family Rel. </th>
        <td mat-cell *matCellDef="let element; let i = index;">
          <div [formGroupName]="i">
            <mat-form-field color="warn" appearance="outline">
              <mat-label>Family Relation</mat-label>
              <mat-select #familyRelation (selectionChange)="onChange(element, i, 'hh')" id="family_relation"
                formControlName="fr" placeholder="Family Relation">
                <mat-option *ngFor="let familyRelation of familyRelationArray;" [value]="familyRelation.family_relation_id">
                  {{familyRelation.family_relation_type}}
                </mat-option>
              </mat-select>
            </mat-form-field>&nbsp;
          </div>
        </td>
      </ng-container>

И вот как я пытаюсь это сделать:

@ViewChild('familyRelation') familyRel: ElementRef;

И при изменении выбора из выпадающего списка:

onChange(data, i, type) {
    let c = this.familyRel.nativeElement.innerText;
    console.log(c)
}

У меня возникла следующая ошибка:

ОШИБКА TypeError: Невозможно прочитать свойство 'innerText' из неопределенного в

А когда я удаляю innerText, значение утешается:

undefined

Что мне нужно, как вы можете видеть в stackblitz, если я выбрал Parent, я хочу получить Parent в переменную, а не 1, которая является ее id.

Обратите внимание, что element, i иhh в (selectionChange)=onChange(element,...) используются позже в этой функции, поэтому забудьте об этом сейчас.

Answer 1

Извините за опоздание на вечеринку.Я действительно ужасаюсь, прочитав все ответы выше ...

Решение гораздо проще и прямее, чем любой из предложенных ответов, поскольку компонент select просто передает выбранную модель как часть аргумента selectionChange.

Но сначала несколько исправлений в вашем примере.Вы объявили интерфейс, поэтому ИСПОЛЬЗУЙТЕ ЕГО:

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

Итак, в вашем конструкторе:

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

, а не то, что вы положили в свой StackBlitz ... Тогда ваше представление будетстаньте так:

<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>

Нет необходимости в обработчике (щелчка) для каждого параметра mat, поскольку он не является необходимым и может привести к проблемам с производительностью, если у вас много параметров.Теперь на контроллере:

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

или, если хотите, набранный вариант:

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

, но не забудьте про импорт ...

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

С уважением; -)

Answer 2

Обновлен код и добавлено click событие для options

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

Добавлена ​​одна функция

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

Добавлено событие клика в представлении

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

Answer 3

Вы можете добавить индекс в цикл с помощью mat-option, а затем передать его в метод onChange (), и он позволит вам получить выбранный элемент из массива.

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

Здесь у вас есть код обновления: ссылка

Answer 4

Используйте compareWith

 <mat-select #familyRelation [compareWith]="compareFn" id="family_relation"  formControlName="fr" placeholder="Family Relation">
      <mat-option *ngFor="let familyRelation of familyRelationArray;" [value]="familyRelation.family_relation_id">
          {{familyRelation.family_relation_type}}
     </mat-option>
 </mat-select>


compareFn(data1 , data2){

}

compareWith для прослушивания события 'change', потому что события 'input' не запускаются для выбора в Firefox. DOC .