TS2322：类型“字符串”不可分配给类型“布尔”

Question

我对二进制有问题，即使添加括号也是如此。

我正在使用 primeNG 库。

在 HTML 文件中，我编写了以下代码：

<div class="products-page">
    <div class="p-grid">
      <div class="p-col-3" *ngIf="!isCategoryPage">
        <h4>Categories</h4>
        <div class="p-field-checkbox" *ngFor="let category of categories">
          <p-checkbox
            [(ngModel)]="category.checked"
            binary="true"
            [inputId]="category.id"
            (onChange)="categoryFilter()"
          ></p-checkbox>
          <label for="{{ category.id }}">{{ category.name }}</label>
        </div>
      </div>
      <div [ngClass]="{ 'p-col-9': !isCategoryPage, 'p-col-12': isCategoryPage }">
        <div class="p-grid" *ngIf="products">
          <div
            [ngClass]="{ 'p-col-4': !isCategoryPage, 'p-col-3': isCategoryPage }"
            *ngFor="let product of products"
          >
            <products-product-item [product]="product"></products-product-item>
          </div>
        </div>
      </div>
    </div>
  </div>

,,,,

在 ts 文件中：

import { Component, OnInit } from '@angular/core';
import { Product, Category } from '@bluebits/products';
import { ProductsService } from '../../services/products.service';
import { CategoriesService } from '../../services/categories.service';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'products-list',
  templateUrl: './products-list.component.html'
})
export class ProductsListComponent implements OnInit {

  products: Product[] = [];
  categories: Category[] = [];
  isCategoryPage: boolean;

  constructor(
    private prodService: ProductsService,
    private catService: CategoriesService,
    private route: ActivatedRoute
    ) { }

  ngOnInit(): void {
    this.route.params.subscribe((params) => {
      params.categoryid ? this._getProducts([params.categoryid]) : this._getProducts();
      params.categoryid ? (this.isCategoryPage = true) : (this.isCategoryPage = false);
    });
    this._getCategories();
  }

  private _getProducts(categoriesFilter?: string[]) {
    this.prodService.getProducts(categoriesFilter).subscribe((resProducts) => {
      this.products = resProducts;
    });
  }

  private _getCategories() {
    this.catService.getCategories().subscribe(
      (resCats) => {
        this.categories = resCats;
      }
    )
  }

  categoryFilter() {
    const selectedCategories = this.categories
      .filter((category) => category.checked)
      .map((category) => category.id);

    this._getProducts(selectedCategories);
  }
}

在模块文件中：

我导入这个模块

import { CheckboxModule } from 'primeng/checkbox';

我收到了这个错误：

错误 TS2322：类型“字符串”不可分配给类型“布尔”。

二进制=“真”

我该如何解决？

Answer 1

当您执行binary="true"时，您将一个字符串分配给一个需要布尔值的属性。 要传递true的布尔值而不是"true"字符串，您必须使用方括号语法：

<p-checkbox [binary]="true" [(ngModel)]="checked"></p-checkbox>

Answer 2

尝试添加[value]="true"属性：

 <p-checkbox [(ngModel)]="category.checked" [binary]="true" [value]="true"></p-checkbox>

Answer 3

只是为了澄清和添加一些参考资料：

binary属性是p-checkbox 的布尔属性。 您的角度模板正在尝试将其设置（绑定）为true （乍一看，属性分配绑定属性可能并不明显，但正如文档所建议的那样：“在大多数情况下，目标名称是属性的名称，即使它看起来是属性的名称。 ")。

同一个文档继续声明：

方括号 [] 使 Angular 将赋值的右侧计算为动态表达式。 如果没有括号，Angular 会将右侧视为字符串文字并将属性设置为该静态值。

IE，没有括号，'binary'被分配了'true'字符串文字，然后被打字稿标记为分配错误。 [binary]='true'触发对布尔值的 'true' 评估。

顺便说一句，您可能会得出结论，您可以通过使用插值 ( binary="{{true}}" ) 来解决该问题。 实际上， 角度文档支持这一概念，并指出“通常插值和属性绑定可以达到相同的结果。 ”。 但是，通过注意“将元素属性设置为非字符串数据值时，您必须使用属性绑定”确实可以证明这一点。

Answer 4

Angular CDK 有一个有用的概念，就是将@Input()声明为BooleanInput而不是boolean 。 除了[myProp]=true之外，这还允许myProp="true"工作。

coerceBooleanProperty函数确保输入值是布尔值。

Answer 5

我通过修改tsconfig.json文件中的 angularCompilerOptions 解决了这个问题。

如果设置了strictTemplates属性，请删除它。