Angular 2 - 將選中的單選按鈕的值添加到數組

我想獲取選中的單選按鈕並將值添加到數組。目前，我無法刪除先前選中的單選按鈕，所以基本上每次我選擇一個單選按鈕時都會添加到數組中。Angular 2 - 將選中的單選按鈕的值添加到數組

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

來源

2017-04-15 Sahin Erbay

Plunker將是有益的。 –

爲什麼使用數組？由於任何時候只有一個單選按鈕被檢查，你不能只保留新選擇的值嗎？ – ConnorsFan

是的，我可以，但我有3個電臺組。所以我認爲，Array會是乾淨的方式來保持它們。在plunker上檢查https://plnkr.co/edit/DCxaGkQFNs3cUDHnp6yG –

，如果你想擁有整齊地存儲的地方的價值觀，我建議，然後利用表單。簡單的模板驅動的形式效果很好這裏，那麼你就必須存儲在一個對象所有的值，這裏有一個例子：

<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

來源

2017-04-16 11:15:29 Alex

Angular 2 - 將選中的單選按鈕的值添加到數組

回答

相關問題