[英]TS2322: Type 'string' is not assignable to type 'boolean'
I have problem with binary, even if add brackets to it.我对二进制有问题,即使添加括号也是如此。
I'm using primeNG library.我正在使用 primeNG 库。
In HTML file I wrote this code:在 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>
,,,, ,,,,
In ts file:在 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);
}
}
In module file:在模块文件中:
I Import this module我导入这个模块
import { CheckboxModule } from 'primeng/checkbox';
I got this error:我收到了这个错误:
error TS2322: Type 'string' is not assignable to type 'boolean'.
错误 TS2322:类型“字符串”不可分配给类型“布尔”。
binary="true"
二进制=“真”
How can I fix it?我该如何解决?
When you do binary="true"
, you're assigning a string to a property that expects a boolean.当您执行
binary="true"
时,您将一个字符串分配给一个需要布尔值的属性。 To pass the true
boolean value rather than the "true"
string you'll have to use the brackets syntax:要传递
true
的布尔值而不是"true"
字符串,您必须使用方括号语法:
<p-checkbox [binary]="true" [(ngModel)]="checked"></p-checkbox>
尝试添加[value]="true"
属性:
<p-checkbox [(ngModel)]="category.checked" [binary]="true" [value]="true"></p-checkbox>
Just to clarify and add some references:只是为了澄清和添加一些参考资料:
The binary
attribute is a boolean property of the p-checkbox
. binary
属性是p-checkbox
的布尔属性。 Your angular template is attempting to set ( bind ) it to true
(it might not seem evident at first glance that the attribute assignment binds a property, but as thedocs suggest: " In most cases, the target name is the name of a property, even when it appears to be the name of an attribute . ").您的角度模板正在尝试将其设置(绑定)为
true
(乍一看,属性分配绑定属性可能并不明显,但正如文档所建议的那样:“在大多数情况下,目标名称是属性的名称,即使它看起来是属性的名称。 ")。
The samedoc proceeds to state:同一个文档继续声明:
The brackets, [], cause Angular to evaluate the right-hand side of the assignment as a dynamic expression.
方括号 [] 使 Angular 将赋值的右侧计算为动态表达式。 Without the brackets, Angular treats the right-hand side as a string literal and sets the property to that static value.
如果没有括号,Angular 会将右侧视为字符串文字并将属性设置为该静态值。
IE, w/o the brackets, 'binary' is assigned the 'true' string literal, which is then flagged as an assignment error by typescript. IE,没有括号,'binary'被分配了'true'字符串文字,然后被打字稿标记为分配错误。
[binary]='true'
triggers an evaluation of 'true' to the boolean value. [binary]='true'
触发对布尔值的 'true' 评估。
BTW, you might conclude that you can workaround the issue by using interpolation ( binary="{{true}}"
).顺便说一句,您可能会得出结论,您可以通过使用插值 (
binary="{{true}}"
) 来解决该问题。 Indeed the angular docs support this notion, stating that " Often interpolation and property binding can achieve the same results. ".实际上, 角度文档支持这一概念,并指出“通常插值和属性绑定可以达到相同的结果。 ”。 It does however qualify that by noting that " when setting an element property to a non-string data value, you must use property binding ".
但是,通过注意“将元素属性设置为非字符串数据值时,您必须使用属性绑定”确实可以证明这一点。
The Angular CDK has a useful concept of declaring your @Input()
s as BooleanInput
instead of boolean
. Angular CDK 有一个有用的概念,就是将
@Input()
声明为BooleanInput
而不是boolean
。 This allows myProp="true"
to work in addition to [myProp]=true
.除了
[myProp]=true
之外,这还允许myProp="true"
工作。
The coerceBooleanProperty
function ensures that the input value is a boolean. coerceBooleanProperty
函数确保输入值是布尔值。
I solved this by modifying the angularCompilerOptions inside the tsconfig.json file.我通过修改tsconfig.json文件中的 angularCompilerOptions 解决了这个问题。
Remove the strictTemplates
property if it is set.如果设置了
strictTemplates
属性,请删除它。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.