Angular 2- 输入文本框中的值未更新，但如果在大括号内使用则更新

Question

import { Component } from '@angular/core';

@Component({

  selector: 'my-app',
  template: `<input [(ngModel)]="name"  type="text" (input)="inputChange()">
<h3>{{name}}</h3> `
})
export class AppComponent  { 
  name = 'Apple'; 

   inputChange() {
     this.name="Zebra";

  }
}

这是我的 angular 组件。我有一个输入框，在每个键输入上都会调用函数 "inputChange()"，这会将我的名字更改为 "Zebra"、

我必须验证用户输入和 return 每次他们写东西时我必须调用输入事件的某些值。我希望文本框值与 "Zebra" 相同，因为无论用户在文本框中键入什么，我的函数都会更改值。我在这里做错了什么？

Answer 1

您正在调用 inputChange()，这会将属性名称更改为 "Zebra"。您已经实现了双向绑定。所以没有必要调用事件函数。

改变这个：

<input [(ngModel)]="name"  type="text" (input)="inputChange()">

至

<input [(ngModel)]="name"  type="text">

要验证该值，您有多种选择。其中 1 个正在获取 HTML 元素的对象引用。

这可以通过以下方式完成：

<input [(ngModel)]="name"  type="text" (input)="inputChange(myInput)" #myInput>

在组件文件中：

inputChange(element: HTMLElement) {
     // Some sort of check
     name = element.value;
  }

并删除双向绑定当然[(ngModel)]="name"

Answer 2

将您的输入事件更改为 keyup

<input [(ngModel)]="name"  type="text" (keyup)="inputChange()">

Angular 2- 输入文本框中的值未更新，但如果在大括号内使用则更新

Angular 2- Value not updated in the input text box but its updated if used inside the curly braces

components

angular-ngmodel

angular