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

Question

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

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

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

app.component.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>

app.component.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>

在component.ts中

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

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

stackblitz example

Answer 2

只需在特定的mat-option 元素上定义click 事件处理程序。

<mat-option value="option3" (click)="greet()">Option 3</mat-option>

Answer 3

如果你想监听来自 Angular 组件的事件，你需要在事件周围添加括号：

<mat-option (selectionChange)="greet($event)">Option 3</mat-option>

那么你的 should 方法应该开始执行了。

Answer 4

尝试如下，

selectionChange 事件是 mat-select 的一部分。因此，当您从列表中选择一个选项时，只需调用该方法。并根据所选选项的值，执行您需要的代码。

.html

<mat-form-field>
  <mat-label>Select an option</mat-label>
  <mat-select [(value)]="selected" (selectionChange)="greet($event)">
    <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>

.ts

selected: string;

greet(event) {
  if(event.value === 'option3') {
    // Execute the required code
  }
}