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

Question

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

最好的方法是什么？我使用angular4。

modo(){
  // if modo 1 is selected do something.
  // if modo 2 is selected do something.
  // if modo 3 is selected do something.
}

<label>Modo :</label>
<select 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>

Answer 1

您可以将change事件处理程序用作以下项，它将选择的值传递给处理程序：

<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;
  }
}

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

https://angular.io/api/forms/NgModel

Answer 2

在下拉列表中处理此问题的 Angular 方法是允许 Angular 使用 来管理值ngModel，并让 AngularngModel通过使用 来监视值的变化ngModelChange。

这是示例的外观：

<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>

在您的组件中，您将为所选下拉值添加一个变量声明，然后在您的modo方法中引用它：

chosenMod: string = "";

modo(){
  switch(this.chosenMod) {  
     case "mod1": { 
        //do something
        break;
     }
     case "mod2": { 
        //do something
        break;
     }
     case "mod3": { 
        //do something
        break;
     }
  }
}

将会发生的事情是由于 上的双向绑定chosenMod，Angular 将观察下拉列表中值的变化，并且会chosenMod在下拉选择更改时更新。

当您绑定到ngModelChange事件时，Angular 将监视ngModel声明的值发生变化，并运行指定的代码。

这两个标签的组合意味着一旦选择发生变化，Angular 就会更新 的值chosenMod，然后执行该modo()方法。

由于您已绑定到组件变量 selectedMod，您无需将选择的值发送到您将执行的 modo 方法中。