Question

我需要获取垫选择的数据，尤其是文本及其值。到目前为止，这就是我实施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

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

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

可以轻松地使用此代码。

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 3

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

java8

我找到了适用于android 9的解决方案，它为我工作。值更改后，需要花费一些时间来更改元素。

如何在Angular Material垫选中获取值和文本

5 个答案: