button - Angular 2 : how to create radio buttons from enum and add two-way binding?

我试图使用Angular2语法从枚举定义中创建单选按钮，并将值绑定(bind)到具有该枚举类型的属性。

我的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 } });
}

单选按钮正确显示，现在我试图将选择的值绑定(bind)到属性。但是，当我单击按钮之一时，值choice.value设置为undefined。

最佳答案

好的，最后我找到了解决方案。我目前正在使用Angular 2 RC5。

我要绑定(bind)我的 radio 的枚举值是该属性:
intervention.rapport.motifIntervention : MotifInterventions
在我的@Component中，我声明了私有(private)成员以提供对html模板中的枚举定义的访问:

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"是双向的
绑定(bind)，则需要更新模型中的属性(在我的
案例intervention.rapport.motifIntervention)

[checked]="intervention.rapport.motifIntervention==choice"是
需要更新单选按钮组件的值
可以从外部修改干预.rapport.motifIntervention。

[value]="choice"是在以下情况下分配给我的媒体资源的值
单选按钮被选中。

{{MotifIntervention[choice]}}是单选按钮

的标签