使用 Angular 2 更改值时调用方法

Posted 2023-03-13

【中文标题】使用 Angular 2 更改值时调用方法

【英文标题】：Call a method when the value is changed using Angular 2

【发布时间】：2016-03-29 09:45:39

【问题描述】：

使用 Angular 2 更改值时如何调用方法？

 <select [(ngModel)]="searchMonster">
     <option>36</option>
     <option>37</option>
 </select>

我尝试使用 ng-change 但没有成功。

【问题讨论】：

How can I get new selection in "select" in Angular 2?的可能重复

【参考方案1】：

使用ngModelChange。检查template syntax docs.

试试这个

<select
  [ngModel]="searchMonster"
  (ngModelChange)="yourMethod($event)">
     <option>36</option>
     <option>37</option>
</select>

<input> 标记与我一起使用的替代方法，试试这个<select>

<select #option
  [ngModel]="searchMonster"
  (ngModelChange)="yourMethod(option.value)">
     <option>36</option>
     <option>37</option>
</select>    

【参考方案2】：

根据我的观察，当我们必须在角度中使用两种方式的数据绑定时，基本上会调用[(ngModel)]。所以视图和控制器/方法是通过绑定调用的。我们可以将 [(ngModel)] 用作 [ngModel] 和 (ngModelChange) 进行更改检测，但在这种情况下，onChange() 会根据此答案here 以这种方式调用每个选择列表更改两次，但您想调用更改方法，您可以在这里使用这种方式：-

<select [(ngModel)]="selectedDevice" #device (change)="onChange(device.value)">
    <option *ngFor="#i of devices">i</option>
</select>

onChange(deviceValue) 
    console.log(deviceValue);

我发现这个问题的最佳答案是this