Question

这是我想要实现的目标，我想在表格中使用ngFor循环。但是当我循环它们时，我点击一个复选框，同时检查了一列中的另一个复选框，我该如何分离索引？

这是我的所作所为：下面是我的HTML：

        <table class="mytable">
            <tr>
                <th>No</th>
                <th>Kode Aplikasi</th>
                <th>Nama Aplikasi</th>
                <th>View?</th>
                <th>Insert?</th>
                <th>Edit?</th>
                <th>Delete?</th>
            </tr>
            <tr *ngFor="let sources of source; let a=index">
                <td>{{a + 1}}</td>
                <td>{{sources.KODE_APPLICATION}}</td>
                <td>{{sources.NAMA_APPLICATION}}</td>
                <td><input type="checkbox" [(ngModel)]="hak_akses" /> {{sources.HAK_AKSES}}</td>
                <td><input type="checkbox" [(ngModel)]="hak_insert" />{{sources.HAK_INSERT}}</td>
                <td><input type="checkbox" [(ngModel)]="hak_edit" />{{sources.HAK_EDIT}}</td>
                <td><input type="checkbox" [(ngModel)]="hak_delete" />{{sources.HAK_DELETE}}</td>
            </tr>
        </table>

这是我的app.component.ts

  hak_akses:any;
  hak_insert:any;
  hak_edit:any;
  hak_delete:any;

this.frmInputMasterRoleService.getListRoleDetail().then(
      data => {
        this.source = data;
        for (var i of this.source) {
          this.hak_akses = i.HAK_AKSES;
        }
      },
      err => {
          console.log(err);
      }

这是我从REST api使用的JSON数据：

[
   {
      "No":"1",
      "KODE_APPLICATION":"APPL00001",
      "NAMA_APPLICATION":"Master Bass",
      "HAK_AKSES":0,
      "HAK_INSERT":0,
      "HAK_EDIT":0,
      "HAK_DELETE":0
   },
   {
      "No":"2",
      "KODE_APPLICATION":"APPL00002",
      "NAMA_APPLICATION":"Master Customer",
      "HAK_AKSES":0,
      "HAK_INSERT":0,
      "HAK_EDIT":0,
      "HAK_DELETE":0
   },
   {
      "No":"3",
      "KODE_APPLICATION":"APPL00003",
      "NAMA_APPLICATION":"Master Teknisi",
      "HAK_AKSES":0,
      "HAK_INSERT":0,
      "HAK_EDIT":0,
      "HAK_DELETE":0
   }
]

我如何让每个复选框都拥有ngModel？所以，当我有“HAK_AKSES”：1时，每个单元格都会检查复选框，当我选中复选框时，其他单元格不受影响？

Answer 1

您需要将每个复选框的新属性添加到JSON数组中。现在你正在使用ngModel的全局变量，这就是为什么更改一个会影响另一个变量的原因。

<tr *ngFor="let sources of source; let a=index">
            <td>{{a + 1}}</td>
            <td>{{sources.KODE_APPLICATION}}</td>
            <td>{{sources.NAMA_APPLICATION}}</td>
            <td><input type="checkbox" [(ngModel)]="sources.hak_akses" /> {{sources.HAK_AKSES}}</td>
            <td><input type="checkbox" [(ngModel)]="sources.hak_insert" />{{sources.HAK_INSERT}}</td>
            <td><input type="checkbox" [(ngModel)]="sources.hak_edit" />{{sources.HAK_EDIT}}</td>
            <td><input type="checkbox" [(ngModel)]="sources.hak_delete" />{{sources.HAK_DELETE}}</td>
        </tr>

注意：即使您没有声明新属性，也可以使用，因为如果您尚未声明属性，则视图会为您创建动态属性。

如何使用ngFor循环复选框，使它在angular2中拥有自己的索引？

1 个答案: