Angular 2-单程绑定的单个单元按钮，在隐藏元素中获取值

Question

plunker链接

我正在加载json。

我需要以下问题的帮助。

问题：单击"保存"按钮我需要获取单击按钮值 true 或 false false

，但现在我将两个广播按钮值作为' true 在控制台'

中

用户可以单击两个按钮，因为它是一个无线电组，我需要一个值为true的值，另一个值为false vice

{name: "rado 1", type: "radio", id: "rOne", checked: true}
{name: "radio 2", type: "radio", id: "rTwo", checked: true}

我的组件HTML代码

<div class="col-md-12  pb-2 pt-4">
  <form class="form-horizontal">

  <div *ngFor="let record of records"> 
  <div *ngFor="let radioButton of record.wrapper">
      <label>
        //hidden element 
        <input  type="hidden" name="{{radioButton.id}}" [(ngModel)]="radioButton.checked">
        <input 
        name="radiogroup" 
        type="radio" 
        id="{{radioButton.id}}"
        [checked]="radioButton.checked" 
        (change)="radioButton.checked = $event.target.checked" 
        [value]="radioButton.checked" 
                > 
                {{radioButton.name}}  
      </label>
  </div>
  </div>
<button class=" btn btn-primary " href="# " (click)="save() ">Save</button>
</form>
</div>`

预期：我需要无线电按钮值对或错误的vice，反之亦然，它不可能是真或错误。

• 值应发送到隐藏变量。
• 两种绑定

我的JSON（我的JSON非常复杂，但在这里使它变得简单）

[
  {
    "wrapper": [
          {
            "name": "rado 1",
            "type": "radio",
            "id": "rOne",
            "checked": false
          },
          {
            "name": "radio 2",
            "type": "radio",
            "id": "rTwo",
            "checked": false
          }
    ]
  }
]

Answer 1

编辑

  <label>
    <input 
    name="radiogroup" 
    type="radio" 
    id="{{radioButton.id}}"
    [value] = "radioButton.id"
    [(ngModel)]="selectedRadioId" > 
            {{radioButton.name}}  
  </label>

ts：

 // On click of save button show console log with values
  save(): void {
    this.records[0].wrapper.forEach((wrapper)=>{
      wrapper.checked = wrapper.id == this.selectedRadioId;
    })
    console.log(this.records[0].wrapper[0]);
    console.log(this.records[0].wrapper[1]);
  }

plunker