Question

我有一个单选按钮列表，这些单选按钮不是表单的一部分。根据一个值，我只想将其中之一设置为true。

然后，当单击另一个时，除单击的一个外，其他所有都设置为false。

单选按钮列表是动态的，由ngFor生成，

我有类似的东西

<div *ngFor='let item of array;let i = index'>                    
   <input type="radio" [checked]=false (click)='radioChecked(item.id,i)' > <input type="text" value='{{item.name}}' >  <button type="button" >save</button>                    
 </div>  

ngOnInit() {  
  this.myService.getNumber(id).subscribe((data) =>{  
  //when the page loads, set one of radiobuttons to true
  //somehow get the id and set to true, no standard is, since dynamic list
  radioId.value = true;
  })
}

radioChecked(id, i){
  //turn all the others to false, except this one
}

由于这不是表单，也没有标准行，所以我可以有一个id，该怎么办？我使用角度6

谢谢

Answer 1

selected属性应该是数组中item对象的一部分。

模板：

    <div *ngFor='let item of array;let i = index'>                    
       <input type="radio" [checked]="item.selected" (change)='radioChecked(item.id,i)' > 
        <input type="text" value='{{item.name}}'/>  
        <button type="button">save</button>                    
     </div>

组件：

 radioChecked(id, i){
  array.forEach(item=>{
    if(item.id !== id){ 
       item.selected = false;
    }else{
       item.selected = true;
    } 
  })
}

Answer 2

实际上，正确的答案是使用(click)而不是(change)

角度单选按钮的动态列表

2 个答案: