0

我正在制作一个支持 [(ngModel)] 指令的自定义组件，它工作得很好。问题是我想在视图中保留货币格式并在模型中保留“正常”数字，这对于 Angular 5 中的 2 路数据绑定是否可行？

这是代码： https ://stackblitz.com/edit/angular-c1qxh4

你会注意到一些事情：

  • 加载时，一切似乎都很好，只有视图具有格式
  • 当您添加让我们说另外 2 个零时，格式也会进入模型（这是我想要避免的）
  • 模型中的格式是错误的（逗号没有正确放置，但这并不重要，反正我不想要那个格式）

那么，我的问题是，有可能做我想做的事吗？如果是这样，我做错了什么？

编辑：为了澄清起见，我不想在 2 个单独的组件上执行此操作（例如，输入和标签，或者输入和不可见的输入（我已经尝试过）），我想知道是否有一种在单个输入上执行此操作的方法。

4

1 回答 1

0

我不确定我是否完全理解您的需求，但我通常使用货币输入或查看功能，如下所示：

组件.ts

public price;

  addCommas(number) {

    let nStr;

    if(typeof number == 'string'){
      nStr = number;
    }else if(typeof number == 'number'){
      nStr = number.toString();
    }else{
      // console.error("ERROR addCommas() : ", number);
      return;
    }
    nStr += '';
    let x = nStr.split('.');
    let x1 = x[0];
    let x2 = x.length > 1 ? '.' + x[1] : '';
    let rgx = /(\d+)(\d{3})/;
    while (rgx.test(x1)) {
      x1 = x1.replace(rgx, '$1' + ',' + '$2');
    }
    return x1 + x2;
  }

组件.html

<div>
  <app-money-input [(ngModel)]="price"></app-money-input>
  ${{addCommas(price)}}   //price is not changed. but transformed when it is rendered.
</div>

然后，您不需要更改价格变量。仅视图模板在呈现时使用 addCommas 函数更改格式。

我希望它对你有帮助:)

我添加了输入 NgModel 转换格式功能。

  1. 使用 priceString 变量定义 ngModel。

  2. 定义将原始值保存到价格变量的转换函数。并转换 $ 和逗号格式并将其保存到 pricsString 变量。

  3. 输入的 keyup 事件绑定

  4. 使用价格（没有格式的原始值）作为输出

*.ts ：

convertPrice(event:any){
    this.price = this.priceString.replace(/,/gi, "");
    this.priceString = this.price.split(/(?=(?:\d{3})+$)/).join(",");
    console.log(this.priceString);
  }

*.html

<input type="text" class="form-control input-sm" id="Price"
       required
       (keyup)="convertPrice($event)"
       [(ngModel)]="priceString"
       placeholder="please enter price">
于 2018-04-18T23:51:13.677 回答