错误 NG9 EventTarget 类型上不存在属性值

Question

我正在尝试在 Angular 中进行数据绑定，但收到此错误消息：[错误] NG9：类型“EventTarget”上不存在属性“值”。 [插件角度编译器] src/app/data-binding/data-binding.component.html:3:42:3 │

这是我的 data-binding.component.html `

Primeiro 组件

<input type="text" [(ngModel)]="$event.target.value"/>

<h1>{{ numero }}</h1>`

这是我的数据绑定.component.ts `从 '@angular/core' 导入 { Component, OnInit };

@Component({
    selector: 'app-data-binding',
    templateUrl: './data-binding.component.html',
    styleUrls: ['./data-binding.component.css']
})

export class DataBindingComponent implements OnInit {
    public numero?: number;
    constructor() {}
    ngOnInit() {}
}`

我试过这个：

数据绑定.component.html `

Primeiro 组件

<input type="text" (input)="eventHandler(($event.target as HTMLInputElement).value)">

<h1>{{ numero }}</h1>`

数据绑定.component.ts `从 '@angular/core' 导入 { Component, OnInit };

@Component({
    selector: 'app-data-binding',
    templateUrl: './data-binding.component.html',
    styleUrls: ['./data-binding.component.css']
})

export class DataBindingComponent implements OnInit {
    // Declarando a variável numero e atribuindo um valor inicial
    public numero?: number;
    constructor() {}
    ngOnInit() {}

    eventHandler(value: string): void {
        console.log('Input value:', value);
        // ... handle the value further
        this.numero = Number(value);

  }

}`

[错误] NG5002：解析器错误：D:/ProgramFiles/cursoAngular/src/app/data-binding/data 中 [eventHandler(($event.target as HTMLInputElement).value)] 第 55 列出现意外标记“)” -binding.component.html@2:28 [插件角度编译器]

src/app/data-binding/data-binding.component.html:5:4:
  5 │ <h1>{{ numero }}</h1>
    ╵     ~~~~~~~~~~~~

组件DataBindingComponent模板出现错误。

src/app/data-binding/data-binding.component.ts:5:15:
  5 │   templateUrl: './data-binding.component.html',
    ╵                ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

还有这个：

数据绑定.component.html `

Primeiro 组件

<input type="text" (input)="obterNumero(value)"/>

<h1>{{ numero }}</h1>`

数据绑定.component.ts `从 '@angular/core' 导入 { Component, OnInit };

@Component({
    selector: 'app-data-binding',
    templateUrl: './data-binding.component.html',
    styleUrls: ['./data-binding.component.css']
})

export class DataBindingComponent implements OnInit {
    // Declarando a variável numero e atribuindo um valor inicial
    public numero?: number;
    constructor() {}
    ngOnInit() {}

    obterNumero(numero: number) {
        this.numero = numero;
  }

}`

应用程序包生成完成。 [0.208 秒] 页面重新加载发送给客户端。 X [错误] NG4：预期有 1 个参数，但得到 0。[插件角度编译器]

src/app/data-binding/data-binding.component.html:3:28:
  3 │ <input type="text" (input)="obterNumero()"/>
    ╵                             ~~~~~~~~~~~

组件DataBindingComponent模板出现错误。

src/app/data-binding/data-binding.component.ts:5:15:
  5 │   templateUrl: './data-binding.component.html',
    ╵                ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

应用程序包生成失败。 [0.232 秒] X [错误] NG9：类型“DataBindingComponent”上不存在属性“值”。 [插件角度编译器]

src/app/data-binding/data-binding.component.html:3:40:
  3 │ <input type="text" (input)="obterNumero(value)"/>
    ╵                                         ~~~~~

组件DataBindingComponent模板出现错误。

src/app/data-binding/data-binding.component.ts:5:15:
  5 │   templateUrl: './data-binding.component.html',
    ╵                ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

应用程序包生成失败。 [0.207 秒] X [错误] NG9：类型“DataBindingComponent”上不存在属性“值”。 [插件角度编译器]

src/app/data-binding/data-binding.component.html:3:40:
  3 │ <input type="text" (input)="obterNumero(value)"/>
    ╵                                         ~~~~~

组件DataBindingComponent模板出现错误。

src/app/data-binding/data-binding.component.ts:5:15:
  5 │   templateUrl: './data-binding.component.html',
    ╵                ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Answer 1

您可以像下面这样处理组件文件中的值：

模板

<input type="text" (input)="setMyNumber($event)"/>
<h1>{{ myNumber }}</h1>`

组件.ts

@Component({...})
export class MyComponent {
  myNumber!: number | undefined;

  setMyNumber(event: Event): void {
    const value = Number((event.target as HTMLInputElement).value);
    this.myNumber = value;
  }
}

或者像这样：

模板

<input type="text" [(ngModel)]="myNumber"/>
<h1>{{ myNumber }}</h1>

组件.ts

@Component({...})
export class MyComponent {
   myNumber!: number | undefined;
}

或者使用反应形式： 模板

<input type="text" [formControl]="inputControl"/>
<pre>{{ inputControl.value | json }}</pre>

组件.ts

@Component({...})
export class MyComponent {
   inputControl = new FormControl<string | null>(null);
}