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

Question

Hello I need to call a function after one of the options is selected.

which is the best way to do it? im using 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

You can use the change event handler as folows, which passes the selected value to the handler:

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

You could also bind the value of the select to a property on your model using [(ngModel)] then you wouldn't need to pass the value to the handler as your model would already have it.

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

Answer 2

The Angular way to approach this in a dropdown would be to allow Angular to manage the value with ngModel , and have Angular watch for the ngModel value to change by using ngModelChange .

This is how it would look with the example:

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

In your component you would add a variable declaration for the chosen dropdown value, and then reference that in your modo method:

chosenMod: string = "";

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

What will happen is because of the two-way binding on chosenMod , Angular will be watching for the value to change in the dropdown, and it will update chosenMod when the dropdown selection changes.

When you bind to the ngModelChange event, Angular will watch for the value of the ngModel declaration to change, and it will run the code specified.

The combination of these two tags will mean that as soon as the selection changes, Angular will update the value of chosenMod , and then execute the modo() method.

Since you've bound to the component variable chosenMod, you don't need to send the value of the selection into the modo method you will be executing.

Answer 3

If you use ngModel you can use 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>

Answer 4

In angular 4+ you should write select code like this

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

This is the best way to call function on select

Answer 5

use (selectionChange)
example:

<mat-select [(value)]="value" (selectionChange)=updateCategory()>
        <mat-option *ngFor="let name of names" [value]="name">
                          name
        </mat-option>
</mat-select>