Angular

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

尝试form.getControls['query'].setValue(myValue)

form.get('fieldName') 将获取该字段的值... form.controls['fieldName'] 将获取字段本身。字段控件将公开获取或设置值方法

Answer 2

您可以通过两种方式完成，

方式一：

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

  get query() {
    return this.form.controls.query;
  }

方式二：

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

  get query(): AbstractControl {
    return this.form.controls.query;
  }

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

Answer 3

虽然接受的答案有效并且其背后的想法是有道理的，但我会完全避免使用 any 作为 return 类型，当你确切地知道你的正在 returning.

这与使用 Typescript 作为语言的目的背道而驰。使用 any 等同于说 “接受所有内容，而不只是将其解释为字符串”.

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

get query(): AbstractControl {
    return this.form.controls.query;
}

因为您知道您正在 returning AbstractControl，我会将 return 类型设置为 AbstractControl 或者，如果你想更具体一点，到 FormControl.

Angular - 在 html 调用 setters/getters

Angular - call setters/getters in html

html

getter-setter