primeng single select 复选框控制台错误

Question

我有多个复选框，当我点击一个复选框时 - 其他复选框必须取消选中，当我点击同一个复选框时 - 此复选框也必须取消选中。现在我有这个实现：

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

在我的组件中我有这个：

public items: any[] = [
    { label: 'labelOne', value: true },
    { label: 'labelTwo', value: false }
]

public selectedValue;

public changeValue(value) { 
   this.selectedValue = value; 
}

一切正常，但当我点击选中的复选框时控制台出现错误：

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)

我做错了什么？谢谢！

Answer 1

根据要求将 changeValue 函数编辑到此

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.

Answer 2

作为替代解决方案，可以使用 binary 选项，see "Boolean value" section。它允许选择一个布尔值而不是多个值。
因此，在您的情况下，复选框应如下所示：

<p-checkbox  [binary]="true" (onChange)="changeValue(item.value)"  [(ngModel)]="selectedValue" name="test" value="{{item.value}}" [inputId]="item.value"></p-checkbox>

primeng single select 复选框控制台错误

primeng single select checkbox console error

typescript

primeng

angular