如何 select 带有 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
  }];

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

How to select radio button with ngFor inside each row having two radio buttons

html

json

typescript

ngfor

angular