angular - Angular 单选按钮的动态列表

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，我该怎么做？我使用 Angular 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;
    } 
  })
}