La valeur sélectionnée dans la liste déroulante ne fonctionne pas Angulaire

Question

Je souhaite utiliser la valeur sélectionnée dans la liste déroulante de ma classe de composants. Lorsqu'une valeur est sélectionnée depuis le menu déroulant, cette valeur est stockée avec ngModel, mais cela ne fonctionne pas. J'ai également essayé une autre méthode, à savoir déclencher une fonction d'événement et passer la valeur sélectionnée comme paramètre.

<select [(ngModel)]="selectedControl" class="form-control" (click)="onSelection($event)"> 
      <option *ngFor="let control of controlArray; let i=index" 
      [value]="control">{{controlArray[i].name}}</option>            
</select> 

Quand je sortie la valeur sélectionnée sur la console, il ne montre pas, voici le code de classe de composant:

onSelection(control){ 
    console.log(typeof(control)) 
    console.log(control.target.value) 
    } 

S'il vous plaît aider.

Answer 1

Vous devez utiliser l'événement change, non click:

<select [(ngModel)]="selectedControl" class="form-control" (change)="onSelection()"> 
    <option *ngFor="let control of controlArray; let i=index" 
      [ngValue]="control">{{controlArray[i].name}}</option> 
</select> 

Aussi, vous devriez vérifier la selectedControl pour la valeur sélectionnée.

onSelection(){ 
    console.log(this.selectedControl) 
} 

La dernière chose - vous devez y mettre une valeur scalaire si vous voulez le faire comme ceci ou utiliser ngValue à la place.