Angular 2 - 将Checked单选按钮的值添加到数组

Question

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

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

Answer 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