12

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 に設定されます。

4

2 に答える 2

1

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

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

どこ：

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

[(ngModel)] を使用しないことに注意してください

于 2018-05-15T00:13:41.870 に答える