# 获取 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` 属性获取选中的选项。typescriptimport { 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 选项的文本。htmlSelect an option {{ option.viewValue }}
typescript// your-component.component.tsimport { 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 进行开发时有所帮助。