从 mat-select angular 获取值 onChange

当我们使用 Angular 中的 mat-select 组件时，需要从用户选择中获取选项的值。这可以通过监听 select 的 "onChange" 事件来完成。以下是如何实现此操作的示例代码。

首先，在 HTML 中添加 mat-select 组件。

<mat-form-field>
  <mat-select placeholder="选择一个选项" (change)="onChange($event)">
    <mat-option *ngFor="let option of options" [value]="option.value">
      {{option.label}}
    </mat-option>
  </mat-select>
</mat-form-field>

上述 HTML 代码中，我们创建了一个 mat-select 组件，并为其添加了一个 "onChange" 事件监听器。"onChange" 事件将在用户选择选项时触发，并为我们提供了一个事件对象 $event。因此，我们将在组件类中定义 onChange() 方法来获取所选选项的值。

import { Component } from '@angular/core';

@Component({
  selector: 'app-select',
  templateUrl: './select.component.html'
})
export class SelectComponent {

  options = [
    { label: "选项 A", value: "a" },
    { label: "选项 B", value: "b" },
    { label: "选项 C", value: "c" }
  ];

  onChange(event) {
    console.log(event.value);
  }

}

上述 TypeScript 代码中，我们在组件类中定义了 onChange() 方法来获取所选选项的值。我们还为 mat-select 组件提供了一个选项数组，该数组显示了可供选择的选项。当用户选择选项时，onChange() 方法会将所选选项的值打印到控制台中，以便我们可以在之后的代码中使用它。

以上就是如何从 mat-select 组件获取选项值的示例代码。我们可以根据需求自行修改代码，如将所选选项的值传递给另一个组件等。