时间戳

首页 > 解决方案 > 传递用户选择的数组

arrays - 传递用户选择的数组

问题描述

我想传递用户检查的数据。我现在的问题..它通过了所有..这是我的演示代码和stackblitz

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}}" 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)
  }

标签： arraysangulartypescript

解决方案

主要有两个问题：

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

.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>

推荐阅读