Question

我正在生成动态单选按钮，它们将全部合并到表单提交中，而不是单独提交。但是，我需要将它们分别绑定到组件中的特定值，我不知道该怎么做。

我在stackoverflow上看到了与此主题相关的其他文章，但是似乎没有一个对我有帮助。

这是我的代码：

<input type="radio" class="one" id="{{ i }}_{{ candidate.user._id }}_{{post.id}}_{{ candidate.date}}" name="{{post.id}}" [value]='candidate.user._id' [(ngModel)]="post.id">
<label for="{{ i }}_{{ candidate.user._id }}_{{post.id}}_{{ candidate.date }}">
    <span>
        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/242518/check-icn.svg" alt="Checked Icon" />
    </span>
</label>

任何帮助将不胜感激。

Answer 1

在component中获取数组的新变量：

private radioButtonValues : Array<any> = [];

然后将其绑定到索引为i的ngModel中，如下所示：

<input type="radio" class="one" 
       id="{{ i }}_{{ candidate.user._id }}_{{post.id}}_{{ candidate.date}}" 
       name="{{post.id}}" 
      [value]='candidate.user._id' 
      [(ngModel)]="radioButtonValues[i]">

如果您想进行一些操作，还可以使用ngModelChange事件来获得更多功能。

<input type="radio" class="one" 
       id="{{ i }}_{{ candidate.user._id }}_{{post.id}}_{{ candidate.date}}" 
       name="{{post.id}}" 
       [value]='candidate.user._id' 
       [(ngModel)]="radioButtonValues[i]" 
       (ngModelChange)='changeEventInRadioButton($event)'>

然后在组件类中声明函数

changeEventInRadioButton($event) {
    console.log($event);
}

最后进行表单提交检查

onSubmit(){
    console.log(this.radioButtonValues);
}

使用ngModel的动态单选按钮2方式绑定-Angular 6

1 个答案: