angular - Kontrollera om en kryssruta är markerad i Angular2

Jag har en tabell i mitt HTML och i en av cellerna i varje rad finns det en inmatningsrutan för kryssning.

Nu försöker jag kontrollera om kryssrutan är markerad eller inte och nedan är vad jag har försökt.

HTML:

<table class="table table-hover" id="just_a_table">
    <thead>
        <tr>
          <th scope="col">Select</th>
          <th scope="col">IP Addr</th>
        </tr>
    </thead>
    <tbody>
        <tr *ngFor="let data of instances">
          <td><input type="checkbox" (click)='onSelect()'></td>
          <td>{{data["IP"]}}</td>
        </tr>
    </tbody>
</table>

TS:

onSelect() {
    // We get the table data from the html and find if the checkbox is active.
    // The rows of the tables can be accessed by "rows" object and cells can be accessed using "cells" object.
    this.table_data = document.getElementById("just_a_table")

        for (var i=1, row; row = this.table_data.rows[i]){
          for (var j=0, cell; cell = row.cells[j]){
            if (<HTMLInputElement>cell[1].checked){
              console.log("It is checked")
            }
        }
    }
}

Jag gör det på det här sättet eftersom jag inte vill hämta inmatningselementet med dess ID och se om det är markerat.

All hjälp/vägledning här skulle vara mycket uppskattad.

Svar #1

HTML

 <table class="table table-hover" id="just_a_table">
       <thead>
           <tr>
               <th scope="col">Select</th>
               <th scope="col">IP Addr</th>
           </tr>
        </thead>
        <tbody>
           <tr *ngFor="let data of instances">
               <td><input type="checkbox" (change)='onSelect($event)'></td>
               <td>{{data["IP"]}}</td>
           </tr>
        </tbody>
   </table>

Du behöver kontrollera event.target.checked för att lösa detta problem. Så här kan du göra det:

TS

onSelect(event) {
     if ( event.target.checked ) {
        // Your logic here
    }
}
  1. Du bör använda (change) istället för (click) eftersom det är bättre praxis
  2. Sluta tänka på JS. Du använder nu Typescript och Angular. Dessa ramverk finns för att vanlig JS suger, så det är inget behov av att fortsätta skriva vanlig JS när du använder dessa fantastiska bibliotek/ramverk

Svar #2

Först skulle jag använda Angular (click) händelsebindning, jag skulle också ändra din ngFor-loop till detta:

<tr *ngFor="let data of instances; let i = index" [attr.data-index]="i">

nu kan vi använda indexet för att veta vilken kryssruta som är markerad.

<table class="table table-hover" id="just_a_table">
    <thead>
        <tr>
          <th scope="col">Select</th>
          <th scope="col">IP Addr</th>
        </tr>
    </thead>
    <tbody>
        <tr *ngFor="let data of instances; let i = index" [attr.data-index]="i">
          <td><input type="checkbox" value="false" (click)='onSelect($event, i)'></td>
        </tr>
    </tbody>
</table>

Jag skulle då fylla en array med falska värden för längden av instansen. Detta är bara om du behöver veta vilka som är markerade, det finns andra metoder för att göra detta men denna kommer först till minnet.

constructor() {
    for (let i = 0; i < this.instances.length; i++) {
        this.resultArray.push(false);
    }
}

Jag skulle då använda event.target.checked för att få det markerade värdet av den klickade kryssrutan och, baserat på indexvärdet, ändra det lämpliga arrayvärdet. Kom ihåg att lägga till parametrarna här också.

onSelect(event, index) {
    // If you need to know which checkboxes are checked
    this.resultArray[index] = event.target.checked;
    // If you don't
    const result: EventTarget = event.target.checked;
    // Do something with value
}

Relaterade artiklar