角显示十进制值为百分比[重复]

Question

我有一个数字文本框，显示百分比值，并允许用户更新它在角应用程序。

            <label for="fees">Fees %</label>
            <div class="input-group">
                <input type="number" class="form-control" id="fees" name="fees"
                 [(ngModel)]=feesPercentage">
                <div class="input-group-prepend">
                    <span class="input-group-text" id="FeesSign">%</span>
                </div>
            </div>

feespercent作为十进制值存储在模型中（例如0.15）。是否有一个管道可以在文本框中以百分比形式显示值（例如15)，同时在模型中仍然保持值为十进制。例如。如果用户将它从15更新到16，我想将模型值更改为0.16。我不需要在文本框中显示“%”符号。

Answer 1

管道是十进制管道：

https://angular.io/api/common/decimalpipe

正常用法如下所示：

{{ (feesPercentage * 100) | number: '1:0-0' }}

在。ts文件中：

get feesPercentageAsInteger(): number {
  return Math.round(this.feesPercentage * 100)
}

然后在HTML中：

[ngModel]="feesPercentageAsInteger" 
(ngModelChange)="updateFeesPercentage($event)"

然后在。ts文件中：

updateFeesPercentage(value) {
  this.feesPercentage = parseInt(value, 10) / 100; // using parseInt here because I think value will be a string (but parseInt will also work if its a number)
}

[ngModel]="(feesPercentage * 100) | round" 
(ngModelChange)="updateFeesPercentage($event)"

updateFeesPercentage(value) {
  this.feesPercentage = parseInt(value, 10) / 100;
}

注意：同样，如果精度损失是一个问题，那么在您的定制圆管中使用Math.Floor而不是Math.round将确保您不会损失精度。

注意：使用step属性对您有帮助吗？可能不会，但只是一个提醒...https://stackoverflow.com/a/22641142/1205871