如何在视图中保留格式而不在模型中？ （Angular 5）

Question

我制作了一个支持[（ngModel）]指令的自定义组件，它运行得很好。问题是我想在视图上保留一种货币格式并保持正常的＆＃34;在模型中的数字，对于Angular 5中的双向数据绑定是否可行？

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

您会注意到一些事情：

• 加载时，一切似乎都很好，只有视图具有格式
• 当你添加时再说2个零，那么格式也会转到模型中（这是我想要避免的）
• 模型中的格式错误（逗号没有正确放置，但这并不重要，我也不想要那里的格式）

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

编辑：为了澄清，我不想在2个独立的组件上做这个（例如输入和标签，或输入和它上面的隐形输入（我已经尝试过了）），I想要知道是否有办法在单个输入上执行此操作。

Answer 1

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

component.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;
  }

component.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. 输入的键盘事件绑定

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">