angular - Hur man vet vilka kryssrutor som alla är markerade med hjälp av angular2?

Jag använder för närvarande Angular2. Jag har min HTML-kod som

<div *ngFor="let val of channelForTabs; let i=index">
            <label for="isCheckBox" style="margin-left:15px;">Draw</label>
            <input id="checkBox{{i}}" type="checkbox" class="fitCheckbox" style="margin-left: 10px;width: 16px;" />
            <de-series-prop></de-series-prop>
        </div>

Så många gånger som värdena i channelForTabs, så många gånger läggs kryssrutan och seriekomponenten till. Hur man kontrollerar vilka kryssrutor som är markerade utan att anropa (change)-metoden.

Jag vill veta hur man vid ett knappklick ser vilka kryssrutor som är markerade och använder de motsvarande seriedata.

Svar #1

Du bör använda ngModel och ngModelChange-händelsen enligt nedan,

<input type="checkbox" (ngModelChange)="clickedItem(color, $event)" checked="false" [ngModel]="!color"> {{color}}<br>

och din metod kommer att vara som

 clickedItem(val,event){
    if(event){
    this.selectedItems.push(val);
    }
    console.log(val);
  }

LIVE DEMO

Svar #2

Detta kommer att fungera, men om användaren avmarkerar ett alternativ kommer värdet att behållas i arrayen. Det måste tas bort varje gång det avmarkeras.

let indexx=this.selectedItems.indexOf(element.value); this.selectedItems.splice(indexx, 1);

Relaterade artiklar