ngModel没有正确绑定

Question

我正在尝试操作输入中的值，因为我想从中提取超过所需长度的值。

在这个例子中，我想保留3个字符并提取其余的字符。为此，我使用了(ngModelChange)和[ngModel]。

HTML

<input type="text"
 [ngModel]="value"
 (ngModelChange)="onChange($event)">

TS

onChange(e: string) {
    if (e.length > 3) {
      this.value= e.substring(0, 3);
      this.input.nativeElement.value = this.value;
    }
  }

它工作一次，但如果我继续更改输入，我可以添加更多字符，输入值不再更新。为什么会这样？为什么来自输入的value不再更新？

我用nativeElement解决了。但我仍然想知道为什么它与[ngModel]不起作用。

我在stackblitz上复制了它

Answer 1

你也可以使用反应形式，以获得valueChanges Observable。这将允许您添加有用的运算符，如debounceTime和distinctUntilChanged，它们提供更丰富的用户体验。

Reactive Forms - valueChanges

Answer 2

为什么会这样？为什么输入的值不再更新？

我猜这是与角度变化检测有关的事情，当组件数据发生变化时，应用程序会尝试重新渲染视图以反映该变化。 ngModelChange是事件发射器，在这种情况下，您尝试在更改检测可以检测并实现更改之前立即更新模型。作为解决方法，可能会使用setTimeout：

onChange2(e: string) {
  console.warn('E input-2 : ', e);
  if (e.length > 3) {
    setTimeout(()=> {
      this.valor2 = e.substring(0, 3);
    });
    console.log('here 2', this.valor2);
  }
}

此外，当模型更新时，您需要在模板中使用双向绑定[(ngModel)]="valor2"来更新视图。这是stackblitz

Answer 3

如何实现你所需要的......

只有一个HTML更改

<input type="text"
 [(ngModel)]="valor2"
 [maxLength]="3"
 >

Answer 4

所以我继续改变代码中的两件事：

1. [ngModel]到[(ngModel)]
2. 添加了(keyup)绑定

StackBlitz

Answer 5

试着看看你的组件中是否使用了changeDetection: ChangeDetectionStrategy.OnPush。如果是，则使用方法markForCheck();更新您的UI。

例如：

constructor(public cd: ChangeDetectorRef) {}

onChange(e: string) {      
   if (e.length > 3) {
       this.value= e.substring(0, 3);
       this.cd.markForCheck();
   }
}   

或尝试检测ngOnInit()中的变化：

ngOnInit() {
  setInterval(() => {
    this.cd.markForCheck();
  }, 3000);
}