Angular 2组件模型如何在不更改模型的情况下刷新视图

Question

Angular 2组件模型如何在不更改模型的情况下刷新视图

7

我有一个Angular 2.4.0应用程序，其中有一个表单，其中包含一些支持Javascript验证/格式化的字段。当字段的格式化完成后，如果从格式化返回的值与附加到模型的原始值匹配，则视图不会更新。是否有一种方法可以强制更新视图？由于没有模型更改，强制组件刷新没有任何效果。我猜想我需要使用类似jQuery的东西单独更新视图，但我想先检查是否有更好的解决方案。

组件: export class Component { field: string

  formatField(updatedField: string) {
    this.field = updatedField.replace(new Regexp("[^\\d]", "g"), ""); // remove everything except numbers
  }
}

HTML:

<html>
  <body>
    <input type="text" [ngModel]="field" (ngModelChange)="formatField($event)">
  </body>
</html>

在上面的例子中，如果模型是“1”，那么我输入"1;['];["，formatField将返回"1"，但是屏幕仍然显示"1;['];["，而我期望显示"1"（这是formatField调用的返回值）。 编辑：在示例中修复了ngModelUpdate为ngModelChange（打字错误）。添加了Angular 2版本的说明。

- Skeeterdrums

你正在使用哪个版本的Angular 2？尝试将ngModelUpdate更改为ngModelChange。 - mickdev

我的错误，我在示例中放置了ngModelUpdate而不是ngModelChange。我正在使用Angular 2.4.0中的ngModelChange来调用该格式方法，但如果模型值没有更改，则视图仍然不会更新。 - Skeeterdrums

1

好的，我明白了。你可以尝试将你的函数绑定到keyup事件上，类似这样：<input type="text" [(ngModel)]="field" (keyup)="formatField(field)"> - mickdev

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Roman C · Accepted Answer

当你对数据模型进行更改后，为了刷新视图，你需要显式地运行变化检测器，然后你可以修改数据模型，ngModel将更新值。

constructor(private cd: ChangeDetectorRef) {}

formatField(updatedField: string) {
    this.field = updatedField;
    this.cd.detectChanges();
    this.field = updatedField.replace(new RegExp("[^\\d]", "g"), ""); // remove everything except numbers
}