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

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>

注意:即使您没有声明新属性，它也会起作用，因为如果您没有声明它们， View 就会为您创建动态属性。