angular - 当属性在角度 4 中没有变化时如何强制更新模板

Question

在我的组件中，它有一个像这样的模板

template: '<input type="text" value="{{formattedValue}}">',

当输入某些错误的输入时，内部 formattedValue 属性不会改变，但我希望 UI 然后更新以显示最后一个正确的值。

例如，如果组件 this.formattedValue 为 1,000，并且用户更新输入以具有文本1,000x，那么我希望输入再次为 1,000。目前这不会发生。当然，我可以在函数中使用 Dom api 更新 DOM，但我更喜欢使用模板。

Answer 1

template: '<input type="text" [ngValue]="formattedValue" (ngValueChange)="checkValue($event)">',


formattedValue:string = '';
constructor(private cdRef:ChangeDetectorRef) {}

checkValue(event) { 
  if(event == /* invalid */) {
    this.cdRef.detectChanges();
  } else {
    this.formattedValue = event;
  }
}