Question

我的文字字段表示为：field = {text: "", valid: false}，输入为[(ngModel)]="field.text"。

我想让该字段只接受一组已定义的字符（对于此问题，数字），并且(keypress)无法在移动设备上工作，所以我做了：(ngModelChange)="fieldChanged(field)" < / p>

该方法执行以下操作：

fieldChanged(field) {
    console.log(field.text);
    field.text = Array.from(field.text).filter((char:string) => "0123456789".indexOf(char) != -1).join("");
    console.log(field.text);
}

它的行为非常奇怪。

注： - 输入：按下了什么键 - 更新前：首先console.log - 更新后：第二个console.log - 输出：我在输入屏幕上看到的内容

| input   | before update | after update | output |
|---------|---------------|--------------|--------|
| ""      | ""            | ""           | ""     | <- starting position, no event
| "a"     | "a"           | ""           | "a"    |
| "a"     | "aa"          | ""           | "aa"   |
| "4"     | "aa4"         | "4"          | "4"    |
| "a"     | "4a"          | "4"          | "4a"   |
| "a"     | "4aa"         | "4"          | "4aa"  |
| "4"     | "4aa4"        | "44"         | "44"   |

为什么输入合法字符时它总是更新输出？它应该适用于每个事件调用。

修改 Plunker

Answer 1

我认为原因是修改constructor(private cdRef:ChangeDetectorRef) {} fieldChanged(field) { console.log(field.text); field.text = Array.from(field.text).filter((char:string) => "0123456789".indexOf(char) != -1).join(""); console.log(field.text); var tmp = field.text; field.text = null; // or some other value that normally won't ever be in `field.text` this.cdRef.detectChanges(); field.text = tmp; this.cdRef.detectChanges(); // I guess this 2nd call won't be necessary }上的值会中断更改检测，例如，如果将值更改回先前的值，则会添加无效字符。

解决方法：

.marquee-horizontal

Answer 2

如果有人在更新值时遇到问题，请在更新时使用setTimeout函数

// setTimeout function
setTimeout(() => {
  field.text = temp;
  this.cdRef.detectChanges();
}, 1);

当`ngModelChange`保持值时，Angular ngModel不会更新

2 个答案: