lundi 8 mai 2017

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

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></td>
                <td></td>
                <td></td>
                <td><input type="checkbox" [(ngModel)]="hak_akses" /> </td>
                <td><input type="checkbox" [(ngModel)]="hak_insert" /></td>
                <td><input type="checkbox" [(ngModel)]="hak_edit" /></td>
                <td><input type="checkbox" [(ngModel)]="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?




Aucun commentaire:

Enregistrer un commentaire