Angular 2: Comment créer des boutons radio à partir d'enum et ajouter la reliure bidirectionnelle?
j'essaie d'utiliser la syntaxe Angular2 pour créer des boutons radio à partir d'une définition enum, et lier la valeur à une propriété qui a le type de cet enum.
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 façon 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 affiche correctement, maintenant je cherche à lier la valeur sélectionnée d'une propriété. Mais quand je clique sur un des boutons le choix de valeur.la valeur est indéfinie.
2 réponses
Ok finalement j'ai trouvé la solution. J'utilise actuellement L'Angular 2 RC5.
La valeur d'enum je veux lier mon radio est la propriété de:
intervention.rapport.motifIntervention : MotifInterventions
dans mon @ Component j'ai déclaré les membres privés pour donner accès à la définition d'enum 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 bidirectionnel de liaison, il est nécessaire de mettre à jour la propriété dans le modèle (dans mon affaireintervention.rapport.motifIntervention) -
[checked]="intervention.rapport.motifIntervention==choice"est nécessaire pour mettre à jour le composant des boutons radio si la valeur intervention.un rapport.motifIntervention est modifié extérieurement. -
[value]="choice"est la valeur qui est attribuée à ma propriété lorsque: le bouton radio est sélectionné. -
{{MotifIntervention[choice]}}est l'étiquette du bouton radio
Un peu en retard à 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ù:
- est un tableau d'options
- ComponentID est le nom du composant
- GetOption est une fonction qui renvoie la légende que l'option doit utiliser
- GetValue est une fonction qui renvoie la valeur option doit utiliser
- selection Modified is utilisé pour mettre à jour le modèle
notez que je n'utilise pas [(ngModel)]