Angular 5 Pipe，{updateOn：'blur'}未按预期更新模型

Question

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

将转换并显示输入字段的值，但是模型的值未正确更新。这是我所期望的功能，有没有办法通过管道实现这一目标？

Stackblitz - Link to Sample Code

重现问题的步骤。

删除现有值并输入任何数字，然后在字段外单击。 （例如：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>

角管：

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

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

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中删除所有管道内容。