如何在 Angular Material mat-select 中获取值和文本

Question

我需要获取 mat-select 的数据，特别是文本及其值。到目前为止，这就是我实现 mat-select 的方式..

<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

更新时间：2020（根据新版角材料更新答案）

在提出问题时，以下旧答案适用于 OP。但我在旧的答案和输出事件中观察到 cmets，mat-select 的 change 在新版本的角材料中已被弃用。所以，正确答案是

工作Stackblitz

HTML：

<mat-form-field>
  <mat-select (selectionChange)="selectedValue($event)">
    <mat-option [value]="'GB'">Great Britain</mat-option>
    <mat-option [value]="'US'">United States</mat-option>
    <mat-option [value]="'CA'">Canada</mat-option>
  </mat-select>
</mat-form-field>

selectionChange 会给我们一个包含两个属性的对象value & source

• value 将保留选定的选项值并
• 要获取选定的选项文本，您只需在source 上调用triggerValue，如下所示

TS：

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

---

---

---

旧答案

通过正常的更改事件，您可以获得如下值

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

Answer 2

要完成前面的答案，可以使用 MatOption 的 viewValue。 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 3

用这段代码就可以轻松搞定。

HTML

 <mat-select value="option1" (selectionChange)=changeRatio($event)>
                <mat-option value="option0">Free Selection</mat-option>
                <mat-option value="option1">1 : 1.5 (Recommended)</mat-option>
 </mat-select>

角度 TS

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

Answer 4

获取所选选项的文本和ID：

在 .html 文件中

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

在 .ts 文件中

import { MatAutocompleteSelectedEvent } from '@angular/material';

.....

selected(event:MatAutocompleteSelectedEvent) {
    let id = event.option.id;;
    let value = event.option.value;
    console.log("id = "+ id + ", value: " + value);
}

Answer 5

onSeletected(e: MatSelectChange): void {
   setTimeout(() => {
     let control = this.getControl('documentInfo');
     control.setValue(e.source._elementRef.nativeElement.innerText);
  }, 500);    
}

我找到了适用于 android 9 的解决方案，它对我有用。值更改后更改元素需要时间。