html - 如何在具有两个单选按钮的每一行内选择带有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
  }];