Angular 7和Angular Material如何获取mat-select的选定选项文本而不是其值

typescript

# 获取 Angular Material 中 mat-select 的选定选项文本

Angular 7 与 Angular Material 是一对强大的组合，用于构建现代、响应式的 Web 应用程序。在使用 Angular Material 中的 mat-select 组件时，我们通常想要获取用户选择的选项文本，而不仅仅是选项的值。本文将介绍如何实现这一目标，并提供相应的案例代码。

## 基本概念

在 Angular 中，mat-select 组件通常用于创建下拉选择框。当用户选择一个选项时，我们可以通过双向绑定获取其值，但如果我们想获取选项的文本呢？Angular Material 提供了一种简单的方式来处理这个需求。

## 获取选定选项文本的方法

为了获取 mat-select 选项的文本，我们可以使用 Angular 中的 ViewChild 装饰器结合 MatSelect 类。这样我们就能够在组件中引用 mat-select，并通过调用 selected 属性获取选中的选项。

typescript
import { Component, ViewChild } from '@angular/core';
import { MatSelect } from '@angular/material/select';
@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.CSS']
})
export class YourComponent {
  @ViewChild(MatSelect) matSelect: MatSelect;
  getSelectedOptionText() {
    const selectedOptionText = this.matSelect.options.toArray()
      .find(option => option.value === this.matSelect.value)?.viewValue;
    console.log('Selected Option Text:', selectedOptionText);
  }
}

在上面的代码中，我们使用 ViewChild 装饰器来引用 MatSelect，并通过 options 属性获取所有选项。然后，我们使用 find 方法找到与当前选中值相匹配的选项，并通过 viewValue 属性获取选项的文本。

现在，我们可以在组件中调用 getSelectedOptionText 方法来获取选中选项的文本。

## 示例

以下是一个简单的 Angular 组件，演示了如何使用上述方法获取 mat-select 选项的文本。

html
<!-- your-component.component.html -->
<mat-form-field>
  <mat-label>Select an option</mat-label>
  <mat-select [(value)]="selectedOption">
    <mat-option *ngFor="let option of options" [value]="option.value">
      {{ option.viewValue }}
    </mat-option>
  </mat-select>
</mat-form-field>
<button (click)="getSelectedOptionText()">Get Selected Option Text</button>

typescript
// your-component.component.ts
import { Component, ViewChild } from '@angular/core';
import { MatSelect } from '@angular/material/select';
@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.CSS']
})
export class YourComponent {
  @ViewChild(MatSelect) matSelect: MatSelect;
  selectedOption: string;
  options = [
    { value: 'option1', viewValue: 'Option 1' },
    { value: 'option2', viewValue: 'Option 2' },
    { value: 'option3', viewValue: 'Option 3' }
  ];
  getSelectedOptionText() {
    const selectedOptionText = this.matSelect.options.toArray()
      .find(option => option.value === this.matSelect.value)?.viewValue;
    console.log('Selected Option Text:', selectedOptionText);
  }
}

在这个示例中，我们创建了一个下拉选择框，用户可以选择其中的一个选项。通过点击按钮，我们调用 getSelectedOptionText 方法来获取当前选中选项的文本，并在控制台中打印出来。

通过使用 ViewChild 和 MatSelect，我们可以轻松地获取 mat-select 选项的文本。这种方法简单而直观，为我们处理用户界面中的下拉选择提供了便利。希望本文对你在使用 Angular 7 和 Angular Material 进行开发时有所帮助。