javascript - 选择选项后调用函数的正确方法。 Angular 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

您可以像下面这样使用更改事件处理程序，它将选定的值传递给处理程序:

<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 的值绑定(bind)到模型上的属性，这样您就不需要将值传递给处理程序，因为您的模型已经拥有它。

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