如何选择带有ngFor的单选按钮，每行有两个单选按钮

Question

本节包含HTML端，向展示我如何迭代的数组

---

<div class="row" *ngFor="let item of modules; let i = index;">
<div class="col-md-1 align-center">{{i+1}}</div>
<div class="col-md-5">
<input type="text" class="form-control" [(ngModel)]="modules[i].module_name" value="{{modules[i].module_name}}"
disabled>
</div>
<div class="col-md-2">
<input type="radio" class="form-control" [(ngModel)]="modules[i].action.read" name="access" [value]="modules[i].action.read">
</div>
<div class="col-md-2">
<input type="radio" class="form-control" [(ngModel)]="modules[i].action.write" name="access" [value]="modules[i].action.write">
</div>
<div class="col-md-2">
<input type="checkbox" class="form-control" [(ngModel)]="modules[i].flag">
</div>
</div>

这是我正在使用的一些对象数组的参考对象

modules = [{
company_id: '0',
role_id: 'xyz',
module_name: 'xyz',
action: {
write: false,
read: false
},
flag:false
},{
company_id: '0',
role_id: 'xyz',
module_name: 'xyt',
action: {
write: false,
read: false
},
flag:false
}];

Answer 1

使用复选框的唯一名称：

参考：https://stackblitz.com/edit/angular-cymeqg?file=src%2Fapp%2Fapp.component.html

<div class="row" *ngFor="let item of modules; let i = index;">
<div class="col-md-1 align-center">{{i+1}}</div>
<div class="col-md-5">
<input type="text" class="form-control" [(ngModel)]="modules[i].module_name" value="{{modules[i].module_name}}" disabled>
</div>
<div class="col-md-2">
<input type="radio" class="form-control" [checked]="modules[i].action.read" (change)="modules[i].action.read"  name="access_{{modules[i].company_id}}">
</div>
<div class="col-md-2">
<input type="radio" [checked]="modules[i].action.write" (change)="modules[i].action.write" class="form-control" name="access_{{modules[i].company_id}}">
</div>
<div class="col-md-2">
<input type="checkbox" class="form-control" [(ngModel)]="modules[i].flag">
</div>
</div>

modules = [{
company_id: '0',
role_id: 'xyz',
module_name: 'xyz',
action: {
write: false,
read: false
},
flag:false
},{
company_id: '1',
role_id: 'xyz',
module_name: 'xyt',
action: {
write: false,
read: false
},
flag:false
}];