问角显示十进制值为百分比

EN

管道是十进制管道：

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

类似于正常使用的东西：

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

1表示在小数点之前至少显示1位数字。

前0表示在小数点之后显示最小0位数。

第二个0表示小数点之后显示的最大0位数。

使用吸气剂

但我认为在你的情况下，管道可能是不合适的。相反，尝试使用这样的getter：

在您的.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)
}

使用自定义管道：

另一个可能的解决方案。与使用getter不同，这可能会奏效：

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

然后，在您的.ts文件中：

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

您在这里会注意到，我使用了一个round自定义管道。之所以这样做是因为您希望文本框中有一个整数。因此，您需要创建一个自定义管道来进行舍入(除非十进制数总是不超过2dp)，这对您来说应该很简单。它确实需要一个数字，并使用Math.round进行舍入并返回结果(使用.产生管道..。在CLI上创建管道)。有什么问题就告诉我。它甚至可能没有定制的管道，但我怀疑它。

当将输入中的数字除以100时，您可能面临的唯一问题是精度下降，这将给您一个小数点和2dp (当原始数字可能包含超过2dp)。如果这里需要考虑精度的损失，那么请考虑在设置updateFeesPercentage之前从feesPercentage中获得附加dps的值(并在设置时将它们附加到其中)。

注:在使用GETTER方法时，精度问题的损失也适用。

注:同样，如果精度下降是一个问题，那么使用Math.floor而不是Math.round在您的定制圆管将确保您不会失去精度。

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