如何在Angular中的更改事件上调用函数答案

【问题标题】：How to call function on change event in Angular如何在Angular中的更改事件上调用函数
【发布时间】：2022-11-02 19:05:03
【问题描述】：

一旦下拉列表的值更改，我想调用一个函数。

我在没有 Angular Material 的情况下做到了这一点。这是我的 ts 和 html 文件。

  selected="pending";
  
  getRequests(event: any) {
    this.selected = event.target.value;
    if(this.selected=="pending")
    console.log("Inside Pending Requests")
    else
    console.log("Inside Granted Requests")
  }

<div style="margin-left: 70%;" appearance="fill">
  <select (change)="getRequests($event)">
    <option value="pending">Pending</option>
    <option value="granted">Granted</option>
  </select>
</div>

现在，我想在角度材质选择组件。调用 getRequests() 函数未按预期工作.有人请帮我解决这个问题。提前致谢。

<mat-form-field style="margin-left: 70%;" appearance="fill">
<mat-label>Status</mat-label>
<mat-select [(value)]="selected" (change)="getRequests($event)" >
  <mat-option value="pending">Pending</mat-option>
  <mat-option value="granted">Granted</mat-option>
</mat-select>

【问题讨论】：

标签： javascript angular typescript

【解决方案1】：

api 是selectionChange 即(selectionChange)="getRequests($event)"。

请参阅文档https://material.angular.io/components/select/api

【讨论】：

【解决方案2】：

您的 mat-select 有一个事件，每次更改选择时都会发出一个事件。根据角度文档，它被称为 selectionChange：https://material.angular.io/components/select/api 所以也许尝试像这样将您的（更改）更改为（selectionChange）：

<mat-form-field style="margin-left: 70%;" appearance="fill">
<mat-label>Status</mat-label>
<mat-select [(value)]="selected" (selectionChange)="getRequests($event)" >
  <mat-option value="pending">Pending</mat-option>
  <mat-option value="granted">Granted</mat-option>
</mat-select>

【讨论】：

【解决方案3】：

在 Angular Material Design 6 及更高版本中，删除了 (change) 方法。而是使用selectionChange

<mat-select (selectionChange)="doSomething($event)">

在此处阅读更多信息：Angular 6 Material mat-select change method removed

【讨论】：