How to loop checkbox using ngFor so it have it own index in angular2?

Question

Here is what i trying to achieve, i want to have checkbox inside table with ngFor looping the . But when i loop them, and i click one checkbox, the other checkbox in one column also checked, how do i separate the index?

here is what i do : below is my 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>

and here is my 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);
      }

here is my JSON data that consume from REST api :

[
   {
      "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
   }
]

how do i have each checkbox own ngModel? so when i have "HAK_AKSES":1 the checkbox is checked too for each cell and when i checked the checkbox the other not affected?

if it is n objects.. you should have an array of checkbox values? depends on the datastructure you want.. — Suraj Rao
Because you have taken [(ngModel)]. And you must be knowing what ngModel can do. Hope this can help you solve your issue. — The Hungry Dictator

Jayakrishnan Jayakrishnan · Accepted Answer · 2017-05-09T05:05:10

You need to add the new properties for each checkbox to your JSON array. Right now you are having global variables for ngModel, that's why changing one affects another.

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

Note: Even if you don't declare new properties, it would work because view creates dynamic properties for you if you haven't declared them.

How to loop checkbox using ngFor so it have it own index in angular2?

1 Answers