Angular-在html中调用setters/getters

Question

我在.ts文件中有以下代码：

set query(query: string) {
this.form.get('query').setValue(query);
}
get query() {
return this.form.controls.query;
}

我正在尝试将.html文件中的getter方法调用为：

<div *ngIf="!query.valid && (query?.dirty || query?.touched)">
<div [hidden]="!query.errors.required">Query is required</div>
</div>

但是，会抛出一个错误。如果我从.ts文件中删除setter，代码就可以完美地工作。

为什么会发生这种情况？

Answer 1

您可以通过两种方式来实现，

方式1:

set query(query: any) {
this.form.get('query').setValue(query);
}
get query() {
return this.form.controls.query;
}

方式2:

set query(query: string) {
this.form.get('query').setValue(query);
}
get query(): AbstractControl {
return this.form.controls.query;
}

当您将值分配给query时，您将其分配为字符串，请参阅setter中的传入参数类型。所以默认情况下angular将其理解为字符串类型。然后在HTML中，您试图将其作为对象访问，这会给angular带来问题，因为它希望它是一个字符串，但却被用作对象。

Answer 2

try-form.getControls['query'].setValue(myValue(

form.get('fieldName'(将获取该字段的值。。。form.controls['fieldName']将获取字段本身。。现场控制将暴露获取或设置值方法

Answer 3

虽然接受的答案是有效的，而且它背后的思想是有道理的，但当你确切地知道你要返回什么时，我会完全避免使用any作为返回类型。

这与使用Typescript作为一种语言的目的背道而驰。使用任何与说"；接受一切，不要只是把它解释成一个字符串。

set query(query: string) {
this.form.get('query').setValue(query);
}
get query(): AbstractControl {
return this.form.controls.query;
}

由于您知道返回的是AbstractControl，我会将返回类型设置为Abstract Control，或者，如果您想更具体地说，设置为FormControl。