web-dev-qa-db-fra.com

Angular 2: comment créer des boutons radio à partir d’énum et ajouter une liaison bidirectionnelle?

J'essaie d'utiliser la syntaxe Angular2 pour créer des boutons radio à partir d'une définition d'énum et lier la valeur à une propriété ayant le type de cette énumération.

Mon html contient:

<div class="from_elem">
    <label>Motif</label><br>
    <div  *ngFor="let choice of motifChoices">
        <input type="radio" name="motif" [(ngModel)]="choice.value"/>{{choice.motif}}<br>
    </div>
</div>

Dans mon @Component, j'ai déclaré l'ensemble des choix et des valeurs:

private motifChoices: any[] = [];

Et dans le constructeur de mon @Component, j'ai rempli les choix de la manière suivante:

constructor( private interService: InterventionService )
{
    this.motifChoices =
        Object.keys(MotifIntervention).filter( key => isNaN( Number( key )))
            .map( key => { return { motif: key, value: false } });
}

Les boutons radio sont affichés correctement, maintenant je cherche à lier la valeur sélectionnée à une propriété. Mais lorsque je clique sur l'un des boutons, la valeur choice.value est définie sur indéfinie.

buttonangularbindingradiotwo-way
10
Anthony Brenelière

Ok enfin j'ai trouvé la solution. J'utilise actuellement Angular 2 RC5.

La valeur enum que je veux lier à ma radio est la propriété:

intervention.rapport.motifIntervention : MotifInterventions

Dans mon @Component, j'ai déclaré des membres privés pour donner accès à la définition d'énum dans le modèle html:

export class InterventionDetails
{
    private MotifIntervention = MotifIntervention;
    private MotifInterventionValues = Object.values(MotifIntervention).filter( e => typeof( e ) == "number" );

    // model object:
    private intervention: Intervention;

Voici le code HTML pour les boutons radio:

<div *ngFor="let choice of MotifInterventionValues">
    <input type="radio"
           [(ngModel)]="intervention.rapport.motifIntervention"
           [checked]="intervention.rapport.motifIntervention==choice"
           [value]="choice" />
    {{MotifIntervention[choice]}}<br>
</div>

  • [(ngModel)]="intervention.rapport.motifIntervention" est une liaison à deux voies, il est nécessaire de mettre à jour la propriété dans le modèle (dans mycase intervention.rapport.motifIntervention)

  • [checked]="intervention.rapport.motifIntervention==choice" est requis pour mettre à jour le composant boutons radio si la valeur intervention.rapport.motifIntervention est modifiée en externe.

  • [value]="choice" est la valeur attribuée à ma propriété lorsque le bouton radio est sélectionné.

  • {{MotifIntervention[choice]}} est l'étiquette du bouton radio

17
Anthony Brenelière

Un peu tard pour la fête, mais cela a fonctionné pour moi:

  <tr *ngFor="let Item of Items; let idx = index" style="line-height: 10px;">
    <td style="font-size:11px;padding-right: 10px;">{{ GetOption(Item) }}</td>                      
    <td><input type="radio" [attr.name]="ComponentID" [id]="ComponentID"
      [value]="GetValue(Item)" [checked]="value == GetValue(Item)" (change)="SelectionChange(GetValue(Item))"></td>           
  </tr>

Où:

  • Items est un tableau d'options
  • ComponentID est le nom du composant
  • GetOption est une fonction qui retourne la légende que l'option .__ devrait utiliser.
  • GetValue est une fonction qui renvoie la valeur que l'option .__ devrait utiliser.
  • SelectionChanged est utilisé pour mettre à jour le modèle

Notez que je n'utilise pas [(ngModel)]

0
Dave Nottage