传递数组--用户选择的

Question

我想传递用户检查过的数据。我现在的问题..。一切都过去了..。这是我的演示代码和stackblitz

<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}}" id="package-1">
<label for="package-1">Read</label>
 </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}}" id="package-2">
<label for="package-2">write</label>
 </div>
 <button (click)="test(item)">test</button>


</div>

组件

 test(val){
    console.log(val)
  }

Answer 1

主要有两个问题：

1. 您需要在for -循环中为label和id属性创建一个唯一的id。
2. 接下来，创建一个方法来切换每个模块的读/写属性。这确保了如果设置了读，那么写将是假的，反之亦然。

.ts

toggleReadWrite(module: any, isRead: boolean) {
   if (isRead) {
     module.action.read = !module.action.read;
     module.action.write = false;
   } else {
     module.action.write = !module.action.write;
     module.action.read = false;
   }
}

.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)="toggleReadWrite(modules[i], true)" 
            name="access_{{modules[i].company_id}}" id="package+1+{{i}}">
        <label for="package+1+{{i}}">Read</label>
    </div>

    <div class="col-md-2">
        <input type="radio" [checked]="modules[i].action.write"
            (change)="toggleReadWrite(modules[i], false)" class="form-control"
            name="access_{{modules[i].company_id}}" id="package+2+{{i}}">
        <label for="package+2+{{i}}">write</label>
    </div>

    <button (click)="test(item)">test</button>
</div>

Answer 2

首先，您应该使单选按钮的id在循环过程中成为唯一的。

id="package-1{{i}}"

<input type="radio" class="form-control" [checked]="modules[i].action.read" (change)="modules[i].action.read"  name="access_{{modules[i].company_id}}" 
id="package-1{{i}}">

<label for="package-1{{i}}">Read</label>

另外，我不知道什么是你想要的输出，请解释更多。