web-dev-qa-db-fra.com

Angular cast cast select value to int

J'ai un formulaire avec différents choix comme:

<select [(ngModel)]="selected.isConnected" (ngModelChange)="formChanged()" name="etat" id="etat" class="form-control">
    <option value="0">Not connected</option>
    <option value="1">Connected</option>
</select>

Mon backend s'attend à recevoir un entier dans l'attribut "isConnected". Malheureusement, dès que je modifie la valeur de la sélection, l'attribut est converti en chaîne:

{
    isConnected : "0", // 0 expected
}

Pour la norme <input> Je pourrais utiliser type="number" mais pour un <select> Je ne sais rien.

Existe-t-il un moyen de forcer angular 2 pour convertir les données en int?

formsangularcasting
30
grunk

Utilisez [ngValue] au lieu de "value":

<select [(ngModel)]="selected.isConnected" id="etat">
    <option [ngValue]="0">Not connected</option>
    <option [ngValue]="1">Connected</option>
</select>
80
Anthony Brenelière

Si vous voulez le convertir dans la méthode formChanged () (que vous n'avez pas encore fournie). Vous devez utiliser + symbole comme indiqué ci-dessous,

formChanged(): void {
    selected.isConnected = +selected.isConnected;
    ...
}
2
micronyks

Non, malheureusement, vous êtes obligé de l'analyser par vous-même dans la méthode formChanged(), car vous récupérez toujours une chaîne de la select.

Vous pouvez l'essayer avec quelque chose comme ceci:

formChanged(): void {
    selected.isConnected = parseInt(selected.isConnected);
    // ...
}
1
rinukkusu

Vous pouvez envoyer une variable numérique pour sélectionner et affecter la valeur de cet élément de sélection. Ensuite, si vous souhaitez capturer la valeur lorsqu'elle change, vous pouvez ajouter (modifier) ​​un événement pour sélectionner et récupérer la valeur comme indiqué ci-dessous.

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `<select value="{{isConnected}}" (change)="printConnected($event.target.value)" name="etat" id="etat" class="form-control">
          <option value="0">Not connected</option>
          <option value="1">Connected</option>
        </select>
        <div *ngIf="changed">You've selected {{isConnected}}<div>`
})
export class AppComponent {

  isConnected : number = 1;
  changed : boolean = false;
  printConnected(value){
this.isConnected = value;
this.changed=true;
  }

}

Vous pouvez voir un exemple sur http://plnkr.co/edit/xO2mrTdpTGufkgXqdhYD?p=preview

0
Gary