为什么 ngModelChange 发出先前的输入值?
Why is ngModelChange emitting the previous value of input?
我有一个(非常)简单的 Angular2 组件,只有一个文本字段。我希望每次对此字段进行任何更改时,控制台都会记录该字段的值。 IE 如果有人键入 "ABCD",控制台应记录:"A"、"AB"、"ABC"、"ABCD"。
然而,我看到发生的情况是,在注册新输入之前,控制台正在记录该字段的先前值。所以相反,我得到:“”,"A","AB","ABC"。
如何才能让控制台在输入新字符后记录文本字段的值?
非常感谢。
到目前为止我的代码:
import { Component, OnInit, ViewChild, EventEmitter, Output } from '@angular/core';
import { NgForm } from '@angular/forms';
@Component({
selector: 'modal-test-form',
template: `
<form>
<input name="data" placeholder="Type something" ngModel (ngModelChange)="onTextChange()"/>
</form>
`,
//templateUrl: './modal-test-form.component.html',
styleUrls: ['./modal-test-form.component.css']
})
export class ModalTestFormComponent{
@ViewChild(NgForm) testForm : NgForm;
constructor() { }
onTextChange() {
console.log(this.testForm.form.value);
}
}
从
更改方法
(ngModelChange)="onTextChange()"
根据你console.log表单中的值,我认为你在提交问题时已经写了一个"error"(??),实际上你的意思是你的方法中有这个方法html:
(ngModelChange)="emitDataValue()"
但无论如何,将其更改为:
(keyup)="emitDataValue()"
它似乎按照您希望的方式工作。
将您的方法更改为
(ngModelChange)="onTextChange($event)"
和组件 class
onTextChange(val: string): any {
console.log("updated value is --->", val);
}
我有一个(非常)简单的 Angular2 组件,只有一个文本字段。我希望每次对此字段进行任何更改时,控制台都会记录该字段的值。 IE 如果有人键入 "ABCD",控制台应记录:"A"、"AB"、"ABC"、"ABCD"。
然而,我看到发生的情况是,在注册新输入之前,控制台正在记录该字段的先前值。所以相反,我得到:“”,"A","AB","ABC"。
如何才能让控制台在输入新字符后记录文本字段的值?
非常感谢。
到目前为止我的代码:
import { Component, OnInit, ViewChild, EventEmitter, Output } from '@angular/core';
import { NgForm } from '@angular/forms';
@Component({
selector: 'modal-test-form',
template: `
<form>
<input name="data" placeholder="Type something" ngModel (ngModelChange)="onTextChange()"/>
</form>
`,
//templateUrl: './modal-test-form.component.html',
styleUrls: ['./modal-test-form.component.css']
})
export class ModalTestFormComponent{
@ViewChild(NgForm) testForm : NgForm;
constructor() { }
onTextChange() {
console.log(this.testForm.form.value);
}
}
从
更改方法(ngModelChange)="onTextChange()"
根据你console.log表单中的值,我认为你在提交问题时已经写了一个"error"(??),实际上你的意思是你的方法中有这个方法html:
(ngModelChange)="emitDataValue()"
但无论如何,将其更改为:
(keyup)="emitDataValue()"
它似乎按照您希望的方式工作。
将您的方法更改为
(ngModelChange)="onTextChange($event)"
和组件 class
onTextChange(val: string): any {
console.log("updated value is --->", val);
}