Javascript 选择选项后调用函数的正确方法。角度4

你好，我需要在选择一个选项后调用一个函数

哪种方法最好？我在用angular4

modo（）{
//如果选择了modo 1，则执行某些操作。
//如果选择了modo 2，则执行某些操作。
//如果选择了modo 3，则执行某些操作。
}

Modo:
MODO 1
MODO 2
MODO 3

您可以使用如下更改事件处理程序，将所选值传递给处理程序：

<select id="selectid" class="form-control-mb-12" (change)="modo($event.target.value)">
   <option value="mod1">MODO 1</option>
   <option value="mod2">MODO 2</option>
   <option value="mod3">MODO 3</option>
</select>

modo(value: string){
  switch(value) {
    case "mod1":
       // if modo 1 is selected do something.
       break;
    case "mod2":
       // if modo 2 is selected do something.
       break;
    case "mod3":
       // if modo 3 is selected do something.
       break;
  }
}

MODO 1
MODO 2
MODO 3
modo（值：字符串）{
开关（值）{
案例“mod1”：
//如果选择了modo 1，则执行某些操作。
打破
案例“mod2”：
//如果选择了modo 2，则执行某些操作。
打破
案例“mod3”：
//如果选择了modo 3，则执行某些操作。
打破
}
}

您还可以使用[（ngModel）]将select的值绑定到模型上的属性，这样您就不需要将该值传递给处理程序，因为您的模型已经拥有该值

---

如果使用

ngModel

可以使用

ngModelChange

<select ngModel (ngModelChange)="doSomething($event)" id="selectid" class="form-control-mb-12">
   <option value="mod1">MODO 1</option>
   <option value="mod2">MODO 2</option>
   <option value="mod3">MODO 3</option>
</select>

MODO 1
MODO 2
MODO 3

在下拉列表中，Angular方法是允许Angular使用

ngModel

管理值，并使用

ngModelChange

对

ngModel

值进行更改

下面是示例的外观：

<select [(ngModel)]="chosenMod" (ngModelChange)="modo()" id="selectid" class="form-control-mb-12">
   <option value="mod1">MODO 1</option>
   <option value="mod2">MODO 2</option>
   <option value="mod3">MODO 3</option>
</select>

由于

chosenMod

上的双向绑定，Angular将监视下拉列表中的值是否更改，并且当下拉列表选择更改时，它将更新

chosenMod

当您绑定到

ngModelChange

事件时，Angular将监视

ngModel

声明的值是否发生更改，并运行指定的代码

这两个标记的组合意味着，一旦选择发生更改，Angular将更新

chosenMod

的值，然后执行

modo（）

方法

---

因为您已经绑定到组件变量chosenMod，所以不需要将选择的值发送到将要执行的modo方法中

在angular 4+中，您应该编写如下选择代码

  <select [ngModel]="info" (onModelChange)="function()">
      <option [ngValue]="">select</option>
      <option *ngFor="info of infoSelect">{{info}}</option>
    </select>

选择
{{info}}

---

这是在select（

（change）=onChange（$event）上调用函数的最佳方法。这将用于更改值请您展开？这是

（更改）

检查此抱歉@FabioGtypo@IxamDeirf你得到了扩展的Ansan，那么我的函数应该在里面吗？要查看选择了哪个选项？所选选项的值将作为字符串传递给modo函数。然后你用它做的只是javascript，例如switch语句，或者你想用它做的任何事情。添加了示例。我添加了如何修改函数，但这实际上与angular无关，只是javascript（或者在本例中是TypeScript）很棒-如果这回答了您的问题，请标记为已回答。那么doSomething函数应该是什么样的呢？要检查已选择了哪个选项，..

doSomething（值：string）{console.log（值）；}

  <select [ngModel]="info" (onModelChange)="function()">
      <option [ngValue]="">select</option>
      <option *ngFor="info of infoSelect">{{info}}</option>
    </select>