samedi 29 avril 2017

PrimeNg Checkbox execute function

I've been trying to get a function to happen whenever I press a checkbox in a datatable. Basically what I have is a datatable with default values in it (1 to 10 for example). Then I give an array of items to my component which are present in an object of mine (2 & 5 for example). now when the grid is constructed It'll all the default elements in the dataTable but Only the data that is in our object will have a checked checkbox next to them. Now what I want to do is to have my addOrRemove function executed wich depending on the state of the checkbox will add or remove a default data object from the array ([2,5] in this case). So 2 or 5 can be unchecked and thus removed from the array and 1,3,4,6,7,8,9,10 can be checked and added to the array.

I don't realy have a problem writing the code for this but I'm struggling to have my function being executed whenever I press the checkbox.

this is how I have my checkbox defined in my html file:

<p-column header="Included" [style]="{'width':'80px', 'text-align':'center'}">
    <template let-object="rowData" pTemplate="body">
        <p-checkbox binary="true" [(ngModel)]="object.included" (change)="addOrRemoveRow($event,object.data)"></p-checkbox>
    </template>
</p-column>

using this I'm not getting any functions triggered. In the PrimeNg documentation there is stated that p-checkbox has an event onChange. but whenever I use that I'm getting the error.

EXCEPTION: Error in http://localhost:3000/app/shared/grid/checkable-grid/checkable-grid.component.html:9:12 caused by:
 self.parentView.context.addOrRemoveRow is not a function

That is whenever I change the (change) to (onChange).

I've read that it has something to do with my checkbox being inside of a template and therefore there is no direct access to my component and its functions. Any help on this would be much appreciated.




Aucun commentaire:

Enregistrer un commentaire