Angular 2 - 将选中的单选按钮的值添加到数组答案

【问题标题】：Angular 2 - Add Value of Checked Radio Button to ArrayAngular 2 - 将选中的单选按钮的值添加到数组
【发布时间】：2017-09-11 22:27:42
【问题描述】：

我正在尝试获取选中的单选按钮并将值添加到数组中。目前，我无法删除之前选中的单选按钮，所以基本上每次我选择单选按钮时它都会不断添加到数组中。

item.component.ts

displaySelectedConditions(event) { 
  if(event.target.checked) {
  this.selectedConditionsArr.push(event.target.value);
  }
}

item.component.html

<ul class="dropdown-menu">
   <li *ngFor="let item of filteredItems | funder "> //generates 4 items
     <a><input type="radio" (change) = "displaySelectedConditions($event);" 
               name="funder" id="{{item}}" value="{{item}}">
     <label for="{{item}}" >{{item}}</label></a>
   </li>
</ul><!-- Dropdown Menu -->

【问题讨论】：

Plunker 会很有帮助。
为什么要使用数组？由于任何时候都只选中一个单选按钮，所以不能只保留新选择的值吗？
是的，我可以拥有，但我还有 3 个广播组。所以我想，Array 将是保留它们的干净方式。检查它在 plunker plnkr.co/edit/DCxaGkQFNs3cUDHnp6yG

标签： javascript angular

【解决方案1】：

如果您想将值整齐地存储在某个地方，我建议您使用表格。简单的模板驱动表单在这里效果很好，然后您会将所有值存储在一个对象中，这是一个示例：

<form #radioGroup="ngForm">
  <div *ngFor="let str of strings">
    <input type="radio" [value]="str" name="str" ngModel />{{str}}
  </div>
  <hr>
  <div *ngFor="let num of numbers">
    <input type="radio" [value]="num" name="num" ngModel />{{num}}
  </div>
</form>

这将创建一个像这样的对象：

{
  str: "value here",
  num: "value here"
}

如果你像下面这样声明表单，你可以很容易地访问对象值：

@ViewChild('radioGroup') radioGroup: NgForm;

组件中的某处：

console.log(this.radioGroup.value);

Plunker

【讨论】：