Angular 2: jak utworzyć przyciski radiowe z enum i dodać wiązanie dwukierunkowe?

Question

Próbuję użyć składni Angular2, aby utworzyć przyciski radiowe z definicji wyliczeniowej i powiązać tę wartość z właściwością, która ma typ tego wyliczenia.

Moje html zawiera:

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

W moim @Component, oświadczyłem zbiór wyborów i wartości:

private motifChoices: any[] = []; 

A w konstruktorze moim @Component, wpisałem te wybory w następujący sposób:

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

Przyciski radiowe są wyświetlane poprawnie, teraz chcę powiązać wartość wybrane do właściwości. Ale kiedy klikam jeden z przycisków, wartość value.value jest ustawiona na undefined.

Answer 1

W końcu znalazłem rozwiązanie. Obecnie używam Angular 2 RC5.

Wartość enum chcę związać moje radio jest własnością:

intervention.rapport.motifIntervention : MotifInterventions

W moim @Component oświadczyłem członków prywatnych dać dostęp do definicji enum w szablonie html:

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

    // model object: 
    private intervention: Intervention; 

Oto kod HTML dla przycisków radiowych:

<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" jest dwukierunkowa wiązanie, wymagane jest, aby zaktualizować właściwości w modelu (w moim przypadku intervention.rapport.motifIntervention)

• [checked]="intervention.rapport.motifIntervention==choice" jest konieczne zaktualizowanie komponentu przycisków radiowych, jeśli wartość interwencji. rapport.motifIntervention jest modyfikowany zewnętrznie.

• [value]="choice" to wartość przypisana do mojej nieruchomości po wybraniu przycisku opcji.

• {{MotifIntervention[choice]}} to etykieta przycisku radiowego