it-swarm.com.de

Angular 2: Wie erstelle ich Optionsfelder von enum und füge eine bidirektionale Bindung hinzu?

Ich versuche, die Angular2-Syntax zu verwenden, um Optionsfelder aus einer Enumendefinition zu erstellen und den Wert an eine Eigenschaft zu binden, die den Typ dieser Enumeration aufweist.

Meine HTML enthält:

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

In meinem @Component habe ich die Auswahl und Werte festgelegt:

private motifChoices: any[] = [];

Und im Konstruktor meines @Component füllte ich die Auswahl folgendermaßen aus:

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

Die Optionsfelder werden korrekt angezeigt. Jetzt möchte ich den ausgewählten Wert an eine Eigenschaft binden. Wenn ich jedoch auf eine der Schaltflächen klicke, wird der Wert choice.value auf undefined gesetzt.

10

Ok endlich fand ich die Lösung heraus. Ich verwende derzeit Angular 2 RC5.

Der Enumerationswert, den ich an mein Radio binden möchte, ist die Eigenschaft:

intervention.rapport.motifIntervention : MotifInterventions

In meiner @Component habe ich private Mitglieder erklärt, in der HTML-Vorlage Zugriff auf die Enumendefinition zu gewähren:

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

    // model object:
    private intervention: Intervention;

Hier ist der HTML-Code für die Optionsfelder:

<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" ist eine bidirektionale Bindung. Es ist erforderlich, die Eigenschaft im Modell zu aktualisieren (in mycase intervention.rapport.motifIntervention).

  • [checked]="intervention.rapport.motifIntervention==choice" ist erforderlich, um die Optionsfeldkomponente zu aktualisieren, wenn der Wert intervention.rapport.motifIntervention extern geändert wird.

  • [value]="choice" ist der Wert, der meiner Eigenschaft zugewiesen wird, wenn das Optionsfeld ausgewählt ist.

  • {{MotifIntervention[choice]}} ist die Bezeichnung des Optionsfelds

17

Ein bisschen zu spät zur Party, aber das hat für mich funktioniert:

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

Woher:

  • Items ist ein Array von Optionen
  • ComponentID ist der Name der Komponente
  • GetOption ist eine Funktion, die die Beschriftung zurückgibt, die die Option Verwenden soll
  • GetValue ist eine Funktion, die den Wert zurückgibt, den die -Option verwenden soll
  • SelectionChanged wird verwendet, um das Modell zu aktualisieren

Beachten Sie, dass ich [(ngModel)] nicht verwende.

0
Dave Nottage