Question

我有这个数据表工作正常：

<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>

现在我想用 PrimeNG复选框 替换输入类型=“复选框”：

<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>

这会导致以下错误（在浏览器控制台中）。 为什么？我错过了什么？

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)

完整的堆栈跟踪here

Answer 1

请使用带二进制选项的复选框

 <p-checkbox [(ngModel)]="obj.status" binary="true"></p-checkbox>

Answer 2

使用p复选框的所有属性

<p-checkbox name="checkbox" value="isAC" label="All Colors" [(ngModel)]="selectedAllColors" [ngModelOptions]="{standalone: true}" id="al" binary="true"></p-checkbox>

更重要的是，不要忘记也包含[ngModelOptions]="{standalone: true}。

PrimeNG dataTable：在p列中使用p-checkbox会导致Error

2 个答案: