Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

PrimeNG dataTable: Using a p-checkbox inside a p-column causes Error

I have this Datatable that works fine:

<p-dataTable [value]="myObjects" [rows]="10" [paginator]="true" [pageLinks]="3">
    <p-column field="name" header="Name"></p-column>
    <p-column field="size" header="Size"></p-column>
    <p-column field="status" header="Is available ?">
        <ng-template let-col let-obj="rowData" pTemplate="body">
            <input type="checkbox" [checked]="obj.status" [(ngModel)]="obj.status" />
        </ng-template>
    </p-column>
</p-dataTable>

Now I would like to replace the input type="checkbox" with a PrimeNG checkbox:

<p-dataTable [value]="myObjects" [rows]="10" [paginator]="true" [pageLinks]="3">
    <p-column field="name" header="Name"></p-column>
    <p-column field="size" header="Size"></p-column>
    <p-column field="status" header="Is available ?">
        <ng-template let-col let-obj="rowData" pTemplate="body">
            <p-checkbox [(ngModel)]="obj.status"></p-checkbox>
        </ng-template>
    </p-column>
</p-dataTable>

This causes the following error (in the browser console). Why ? What am I missing ?

core.es5.js:1020 ERROR Error: Uncaught (in promise): TypeError: this.model.indexOf is not a function
TypeError: this.model.indexOf is not a function
    at Checkbox.isChecked (http://localhost:4200/vendor.bundle.js:110341:45)
    at Checkbox.writeValue (http://localhost:4200/vendor.bundle.js:110362:29)

Full stacktrace here

like image 246
Tim Avatar asked Jul 11 '17 16:07

Tim


1 Answers

Please use checkbox with binary option

 <p-checkbox [(ngModel)]="obj.status" binary="true"></p-checkbox>
like image 83
TimeTraveler Avatar answered Oct 13 '22 22:10

TimeTraveler