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

Question

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

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

feesPercentage 在模型中存储为十进制值（例如 0.15）。是否有管道可用于在文本框中将值显示为百分比（例如 15），同时在模型中仍将值保持为小数。例如。如果用户将其从 15 更新为 16，我想将模型值更改为 0.16。我不需要在文本框中显示“%”符号。

Answer 1

管道是十进制管道：

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)
}

使用自定义管道：

另一种可能的解决方案。而不是使用吸气剂，这可能会起作用：

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

然后再次在您的 .ts 文件中：

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

您会注意到这里我使用了round 自定义管道。这样做的原因是因为你想要一个整数作为你的文本框。因此，您需要创建一个自定义管道来进行舍入（除非十进制数始终不超过 2dp），这对您来说应该很简单。它实际上需要一个数字并使用 Math.round 进行舍入并返回结果（在 CLI 中使用 ... ng generate pipe ... 创建管道）。然后有任何问题告诉我。它甚至可以在没有自定义管道的情况下工作，但我对此表示怀疑。

您可能面临的唯一问题是在将输入中的数字除以 100 时会丢失精度，这将为您提供 2dp 的小数（当您的原始数字可能包含超过 2dp 时）。如果此处担心精度损失，请考虑在设置之前调整updateFeesPercentage 函数以从feesPercentage 获取附加dps 的值（并在设置时将其附加到它）。

注意：使用 GETTER 方法时也会出现精度损失问题。

注意：同样，如果担心精度损失，那么在自定义圆管中使用 Math.floor 而不是 Math.round 将确保您不会丢失精度。

注意：在这里使用 step 属性会帮助你吗？可能不是，只是提醒一下...https://stackoverflow.com/a/22641142/1205871