Angular 2：如何从枚举创建单选按钮并添加双向绑定？答案

【问题标题】：Angular 2: how to create radio buttons from enum and add two-way binding?Angular 2：如何从枚举创建单选按钮并添加双向绑定？
【发布时间】：2017-01-16 10:39:09
【问题描述】：

我正在尝试使用 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 } });
}

单选按钮显示正确，现在我试图将选定的值绑定到一个属性。但是当我单击其中一个按钮时，值choice.value 设置为未定义。

【问题讨论】：

标签： button angular binding radio two-way

【解决方案1】：

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

我要绑定收音机的枚举值是属性：

intervention.rapport.motifIntervention : MotifInterventions

在我的@Component 中，我声明了私有成员以访问 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" 是双向的绑定，需要更新模型中的属性（在我的案例intervention.rapport.motifIntervention)
[checked]="intervention.rapport.motifIntervention==choice" 是如果值需要更新单选按钮组件 intervention.rapport.motifIntervention 被外部修改。
[value]="choice" 是分配给我的属性的值，当单选按钮被选中。
{{MotifIntervention[choice]}}是单选按钮的标签

【讨论】：

这救了我的命 [value]="choice" ... 很奇怪，api 文档甚至没有显示这个：angular.io/docs/ts/latest/api/forms/index/…
从 Object.values 中，我得到“'ObjectConstructor' 类型上不存在属性 'values'。”
我还得到“'ObjectConstructor'类型上不存在属性'值'”
自 9 月以来可能已更改为 [ngValue]。我会在我的应用中验证后立即更新我的帖子。
“ObjectConstructor”类型上不存在“属性‘值’的问题。”可以通过使用 (Object).values(MotifIntervention).filter(e => typeof(e) == 'number');

【解决方案2】：

聚会有点晚了，但这对我有用：

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

【讨论】：