Angular使用PrimeNG p-checkbox配置binary属性报TS2322错误如何解决

报错原因 #

PrimeNG 的 p-checkbox 组件 binary 属性要求传入布尔值，你当前写法 binary="true" 会被 Angular 识别为字符串 "true"，和要求的布尔类型不匹配，所以抛出类型错误。
如果你加了方括号绑定还是报错，大概率是因为你用到的 Category 类型没有定义 checked 字段，导致连带的类型校验不通过。

修复步骤 #

1. 修正 binary 属性的绑定写法，用方括号包裹告诉 Angular 这是表达式绑定，传入的是布尔值 true 而非字符串：

<p-checkbox
  [(ngModel)]="category.checked"
  [binary]="true"
  [inputId]="category.id"
  (onChange)="categoryFilter()"
></p-checkbox>

2. 扩展 Category 类型补全 checked 字段定义：
   你当前从 @bluebits/products 导入的 Category 类型默认没有 checked 属性，需要扩展类型：

// 在组件文件顶部新增扩展类型
interface CategoryWithChecked extends Category {
  checked?: boolean;
}

// 修改组件中categories变量的类型声明
categories: CategoryWithChecked[] = [];

如果不想扩展类型，也可以临时在 tsconfig.json 中关闭组件输入类型校验（不推荐，会降低类型安全性）：

{
  "angularCompilerOptions": {
    "strictInputTypes": false
  }
}

补充说明 #

binary 属性的作用是让复选框的 ngModel 绑定单个布尔值，而不是默认的选中值集合。如果你的 category.checked 本身就是用来存储当前分类是否选中的布尔值，这个属性配置是合理的。

内容的提问来源于stack exchange，提问作者Salman