Angular 5 管道，{updateOn:'blur'} 未按预期更新模型

Question

我在 Angular 5 中创建了一个自定义管道，用于更新模糊输入字段的显示。

输入字段的值转换显示，但模型的值没有正确更新。这是我期待的功能，有没有办法用管道实现这个功能？

重现问题的步骤。

删除现有值并输入任意数字，然后在字段外单击。（例如：242235.34234）

输入值与模型值不匹配。

HTML代码：

<h1>Currency Pipe</h1>

<div>
  Input:
  <input type="text" [ngModel]="inputValue | currency" name="inputValue"
    [ngModelOptions]="{updateOn:'blur'}" (ngModelChange)="inputValue=$event"/>
</div>

<div>{{ inputValue }}</div>

Angular 管道：

import { Pipe, PipeTransform } from '@angular/core';
import * as accounting from 'accounting';

@Pipe({
  name: 'currency'
})
export class CurrencyPipe implements PipeTransform {

  private format = { precision: 2, thousand: ',', decimal: '.' };

  transform(value: string): any {

    let formattedValue = accounting.unformat(value);
    return accounting.formatNumber(formattedValue, this.format);
  }

}

Answer 1

您要为输入而不是输出添加管道？ {{ 输入值 |货币}}

Answer 2

如我之前所述，您不应该使用管道来改变值。相反，尝试 getter/setter.

import { Component } from '@angular/core';
import * as accounting from 'accounting';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  private $inputValue;
  private format = { precision: 2, thousand: ',', decimal: '.' };

  set inputValue(value){
    let formattedValue = accounting.unformat(value);
    this.$inputValue = accounting.formatNumber(formattedValue, this.format);
  } 

  get inputValue(){ return this.$inputValue; }
}

并从 html 中删除所有管道内容。

Angular 5 管道，{updateOn:'blur'} 未按预期更新模型

Angular 5 Pipe, {updateOn:'blur'} not updating model as expected

angular-pipe

angular