Question

我试图从输入中操纵值，因为我想从输入中提取超出所需长度的值。

在此示例中，我想保留3个字符并提取其余字符。为此，我使用了import pandas as pd import re a["idx"] = 1 r["idx"] = 1 df = a.merge(r, on="idx").drop("idx", axis=1) df["output"] = df.apply(lambda x: bool(re.compile(x["regex_search"]).search(x["strings_to_search"])), axis=1) df[df["output"] == True].groupby("strings_to_search")["regex_search"].apply(list)和(ngModelChange)。

html

[ngModel]

ts

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

它只能工作一次，但是如果我继续更改输入，则可以放置更多字符，并且输入值不再更新。 为什么会这样？为什么输入的onChange(e: string) { if (e.length > 3) { this.value= e.substring(0, 3); this.input.nativeElement.value = this.value; } }不再更新？

我使用value解决了。但是我仍然想知道为什么它不适用于nativeElement。

我在stackblitz上复制了它

Answer 1

您还可以使用反应形式来访问valueChanges Observable。这样，您就可以添加有用的运算符，例如debounceTime和distinctUntilChanged，它们可以提供更丰富的用户体验。

Reactive Forms - valueChanges

Answer 2

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

我想这与Angular更改检测有关，当组件数据更改时，应用程序尝试重新渲染视图以反映该更改。 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

所以我继续在您的代码中更改2件事：

[ngModel]至[(ngModel)]
添加了(keyup)绑定

StackBlitz

Answer 4

以下如何实现您所需要的...

仅一个 HTML 更改

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

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);
}

ngModel未正确绑定

5 个答案: