Question

我正在使用带有Angular2的Typescript，就像在Angular2 Tour of Heroes教程中一样。

我有一个输入字段，我想附加一个change事件，以便在字段更改时可以执行某些自定义逻辑。我需要知道字段的当前值来执行逻辑，因此我不想将该字段与ngModel绑定，因为在我能够在更改之前检索其以前的值之前，它将覆盖该属性

所以我有类似的东西：

<input (change)="handleChange(myObj, $event)" value={{ myObj.myField }}... />

然后在handleChange：

handleChange (obj: MyObjectClass, e: Event) {
  oldValue: number = obj.myField;
  newValue : number = parseInt(e.target.value);

  // Do some logic

  obj.myField = newValue;
}

虽然这在代码中运行良好，但是Typescript编译器在行error TS2339: Property 'value' does not exist on type 'EventTarget'.上抛出错误newValue : number = parseInt(e.target.value);

有更好的方法吗？

Answer 1

要对输入值进行验证，最好编写自定义验证程序，而不是尝试使用更改事件。话虽这么说，您可以通过使用对输入的引用传递输入值，如下所示：

<input #myInput (change)="handleChange(myInput.value, $event)" value={{ myObj.myField }}... />

Answer 2

Angular2事件无法直接访问事件的目标。你真的不应该通过raw元素访问你的值，你应该总是使用绑定。

<强> whatever.component.ts

export class WhateverComponent {
    private tempField: any;

    private handleChange(obj: MyObjectClass, e: Event) {
        obj.field = this.tempField;
    }
}

<强> whatever.component.html

<input (change)="handleChange(myObj, $event)" [value]="tempField" />

如果你真的必须访问该元素，那么就有ElementRef类。但是，这是一个主要的安全风险，您应该注意文档中的警告：

允许直接访问DOM可能会使您的应用程序更容易受到XSS攻击。仔细检查代码中ElementRef的任何使用。有关详细信息，请参阅Security Guide。

Answer 3

如果您看到EventTarget的定义，则如下所示，

 interface EventTarget {
   addEventListener(type: string, listener: EventListenerOrEventListenerObject, useCapture?: boolean): void;
   dispatchEvent(evt: Event): boolean;
   removeEventListener(type: string, listener: EventListenerOrEventListenerObject, useCapture?: boolean): void;
 }

它不包含value属性。所以，如果你想以正确的方式做到，你可以使用，

 e.target['value']

现在，为什么EventTarget上没有值proerty可以支持不同类型的事件，例如，您可以为input type checked使用相同的事件，在这种情况下，您希望看到checked属性

希望这会有所帮助!!

Answer 4

最简单的方法是使用官方Get user input from a template reference variable。所以它只会发生在Template范围内，而不会影响Component。类似的东西：

<input (change)="handleChange(myObj, newValue.value)" #newValue />

// Method keep the same
handleChange (obj: MyObjectClass, e: Event) {
  oldValue: number = obj.myField;
  newValue : number = parseInt(e.target.value);

  // Do some logic

  obj.myField = newValue;
}

奖励是指如果您需要将Enter键绑定到input字段，则无需编写恼人的if($event.keyCode == 13) ...，而是使用Key event filtering羽毛和做：

(keyup.enter)="onEnter(newvalue.value)"

在Angular2 / Typescript

4 个答案: