1

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

我正在使用 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：类型“字符串”不可分配给类型“布尔”。

二进制=“真”

我该如何解决？

4

3 回答 3

6

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

<p-checkbox [binary]="true" [(ngModel)]="checked"></p-checkbox>
于 2021-09-01T13:40:16.743 回答
1

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

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

于 2021-10-19T10:29:05.453 回答
0

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

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

同一个文档继续声明：

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

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

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

于 2021-11-24T03:42:29.623 回答