[英]primeng single select checkbox console error
I have multiple checkboxes and when I click on one checkbox - other must be unselected and when I click on the same checkbox - this checkbox must be unselected as well.我有多个复选框,当我单击一个复选框时 - 必须取消选中另一个复选框,当我单击同一个复选框时 - 此复选框也必须取消选中。 Right now I have this implementation:
现在我有这个实现:
In html page I'm using *ngFor like this:在 html 页面中,我使用 *ngFor 如下:
<ng-container *ngFor="let item of items">
<div>
<p-checkbox (onChange)="changeValue(item.value)" [(ngModel)]="selectedValue" name="test" value="{{item.value}}" [inputId]="item.value"></p-checkbox>
<label [for]="item.value">{{item.label}}</label>
</div>
</ng-container>
And in my component I have this:在我的组件中,我有这个:
public items: any[] = [
{ label: 'labelOne', value: true },
{ label: 'labelTwo', value: false }
]
public selectedValue;
public changeValue(value) {
this.selectedValue = value;
}
Everything works fine, but there is an error in the console when I click on selected checkbox:一切正常,但是当我单击选中的复选框时,控制台中出现错误:
Checkbox.html:7 ERROR TypeError: this.model.filter is not a function
at Checkbox.push../node_modules/primeng/fesm5/primeng-checkbox.js.Checkbox.removeValue (primeng-checkbox.js:87)
at Checkbox.push../node_modules/primeng/fesm5/primeng-checkbox.js.Checkbox.updateModel (primeng-checkbox.js:62)
at Checkbox.push../node_modules/primeng/fesm5/primeng-checkbox.js.Checkbox.onClick (primeng-checkbox.js:52)
at Object.eval [as handleEvent] (Checkbox.html:7)
at handleEvent (core.js:29239)
at callWithDebugContext (core.js:30309)
at Object.debugHandleEvent [as handleEvent] (core.js:30036)
at dispatchEvent (core.js:19859)
at core.js:28448
at HTMLDivElement.<anonymous> (platform-browser.js:1032)
What am I doing wrong?我究竟做错了什么? Thanks!
谢谢!
As per requirement edit changeValue function to this根据要求编辑changeValue function 到这个
changeValue(value) {
if(this.selectedValue.length === 2) {
this.selectedValue = [value]; //as selectedValue is array
}
}
In PrimeNg p-checkBox ngModel property refers to an array to bind the selected values.
在 PrimeNg p-checkBox中,ngModel 属性是指一个数组来绑定选定的值。
As alternative solution can use binary
option, see "Boolean value" section .作为替代解决方案可以使用
binary
选项,请参阅“布尔值”部分。 It allows selecting a boolean value instead of multiple values.它允许选择 boolean 值而不是多个值。
Thus in your case, the checkbox should look like this:因此,在您的情况下,复选框应如下所示:
<p-checkbox [binary]="true" (onChange)="changeValue(item.value)" [(ngModel)]="selectedValue" name="test" value="{{item.value}}" [inputId]="item.value"></p-checkbox>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.