选择 mat-option 时如何调用方法（角度）？

Question

我是 Angular 新手，我想仅在选择 option3 时调用特定方法。我正在努力解决这个问题，并且在互联网上找不到太多有关此问题的信息。

当我调用 option3 时，输出为空。

到目前为止，这是我的代码：

应用程序组件.html：

<mat-form-field>
  <mat-label>Select an option</mat-label>
  <mat-select [(value)]="selected" >
    <mat-option>None</mat-option>
    <mat-option value="option1">Option 1</mat-option>
    <mat-option value="option2">Option 2</mat-option>
    <mat-option selectionChange="greet($event)">Option 3</mat-option>
  </mat-select>
</mat-form-field>

<p>You selected: {{selected}}</p>

应用程序组件.ts：

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'materialdesign';
  selected = 'option33';


  greet() {
    this.selected = 'it works';
  }
}

Answer 1

尝试这个

<mat-form-field>
  <mat-label>Select an option</mat-label>
  <mat-select [(value)]="selected" (selectionChange)="inputChange()">
    <mat-option>None</mat-option>
    <mat-option value="option1">Option 1</mat-option>
    <mat-option value="option2">Option 2</mat-option>
    <mat-option value="option3">Option 3</mat-option>
  </mat-select>
</mat-form-field>

<p>You selected: {{selected}}</p>

在组件.ts中

title = 'materialdesign';
  selected = 'option33';
inputChange(){
  if(this.selected == 'option3'){
    this.greet();
  }
}

  greet() {
    this.selected = 'it works';
  }

堆栈闪电战示例