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

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

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