web-dev-qa-db-ja.com

Angular 2：enumからラジオボタンを作成して双方向バインディングを追加する方法は？

Angular2構文を使用して列挙型定義からラジオボタンを作成し、その列挙型の型を持つプロパティに値をバインドしようとしています。

私のhtmlには以下が含まれます：

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

私の@Componentで、選択肢と値のセットを宣言しました。

private motifChoices: any[] = [];

そして、私の@Componentのコンストラクターで、次のように選択肢を入力しました。

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

ラジオボタンは正しく表示されますが、選択した値をプロパティにバインドしようとしています。しかし、ボタンの1つをクリックすると、値choice.valueがundefinedに設定されます。

buttonangularbindingradiotwo-way
12
Anthony Brenelière

やっと解決策を見つけました。私は現在Angular 2 RC5を使用しています。

私のラジオをバインドしたい列挙値はプロパティです：

_intervention.rapport.motifIntervention : MotifInterventions_

私の@Componentで、htmlテンプレートのenum定義へのアクセスを許可するプライベートメンバーを宣言しました。

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

    // model object:
    private intervention: Intervention;
_

ラジオボタンのHTMLコードは次のとおりです。

_<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"は双方向バインディングです。モデルのプロパティを更新する必要があります（私の場合は_intervention.rapport.motifIntervention_）。

  • _[checked]="intervention.rapport.motifIntervention==choice"_は、intervention.rapport.motifInterventionの値が外部で変更された場合にラジオボタンコンポーネントを更新するために必要です。

  • _[value]="choice"_は、ラジオボタンが選択されたときにプロパティに割り当てられる値です。

  • _{{MotifIntervention[choice]}}_はラジオボタンのラベルです

20
Anthony Brenelière

パーティーには少し遅れましたが、これは私にとってはうまくいきました：

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

どこ：

  • アイテムはオプションの配列です
  • ComponentIDはコンポーネントの名前です
  • GetOptionは、オプションが使用するキャプションを返す関数です
  • GetValueは、オプションが使用する値を返す関数です
  • SelectionChangedはモデルの更新に使用されます

[（ngModel）]は使用しないことに注意してください

1
Dave Nottage