Как получить значение и текст в матовом материале Angular Material

Question

Мне нужно получить данные мата - выбрать конкретно текст и его значение. Вот так я реализовал выбор матов до сих пор ..

<mat-select placeholder="Transaction Type" (selectionChange)="selected($event)" formControlName="TransactionTypeID">
    <mat-option *ngFor="let t of transactionTypes" [value]="t.TransactionTypeID">
        {{t.TransactionType}}
    </mat-option>
</mat-select>

Вот так я получаю значение в файле .ts: this.formDetail.get('TransactionTypeID').value,

Это моя попытка получить текст или 't.TransactionType':

selected(event: MatSelectChange) {
    console.log(event);
}

Не могли бы вы показать мне, как это сделать? Спасибо.

Answer 1

Для завершения предыдущего ответа можно использовать viewValue MatOption. Также компилятор Angular 7 хочет знать, должен ли event.source.selected быть массивом или отдельным объектом.

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

Answer 2

При обычном событии изменения вы можете получить значение, как показано ниже

В файле .html

<mat-select placeholder="Transaction Type" (change)="selected($event)" formControlName="TransactionTypeID">
    <mat-option *ngFor="let t of transactionTypes" [value]="t.TransactionTypeID">
        {{t.TransactionType}}
    </mat-option>
</mat-select>

В файле .ts

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