我有一个 angular2 应用程序，在经过一些计算后，它需要在输入中始终显示两位小数。但是，虽然在组件中我强制使用两位小数，但在输入中它以零十进制、一位小数或数字所具有的小数显示，但我需要始终显示两位。
在控制器中，我强制以这种方式保留两位小数
return +(this.getCost() * this.getQuantity()).toFixed(2);
但是当我显示时，结果可以有不同的小数大小
<input name="number" pattern="^[0-9]+(\.[0-9]{1,2})?" step="0.01" formControlName="number" type="button" class="form-control" id="number" >
添加我正在使用 TypeScript 并且字段类型是数字（我认为这是导致舍入的原因）
【问题讨论】：
标签： javascript angular typescript
我建议您在输入字段上使用掩码，有一个包 text-mask 我以前使用过并且可以使用！
注意：看看你的html输入类型，你说的是数字，但实际上在你的问题中类型是按钮
使用包：
安装包
npm i angular2-text-mask text-mask-addons --save
在你的应用模块文件中导入它
import { TextMaskModule } from 'angular2-text-mask';
@NgModule({
imports: [
/* ... */
TextMaskModule
]
/* ... */
})
export class AppModule { }
在你的component.ts中
import createNumberMask from 'text-mask-addons/dist/createNumberMask';
@Component({
selector: 'app-my-component',
templateUrl: './my-component.html',
styleUrls: ['./my.component.scss'] })
export class MyComponent implements OnInit {
public price = 0;
private currencyMask = createNumberMask({
prefix: '',
suffix: '',
includeThousandsSeparator: true,
thousandsSeparatorSymbol: ',',
allowDecimal: true,
decimalSymbol: '.',
decimalLimit: 2,
integerLimit: null,
requireDecimal: false,
allowNegative: false,
allowLeadingZeroes: false
});
}
在你的 component.html 中
<input type="text" [textMask]="{mask: currencyMask}" name="receivedName" id="received" class="form-control" maxlength="50" [(ngModel)]="price"/>
【讨论】：
angular2-text-mask v. 9.0.0 和 text-mask-addons v. 3.2.7。
tl;博士;选项1：返回一个字符串，不要转换为数字。选项 2：使用数字管道。
toFixed 返回一个字符串。
您正在将toFixed 的结果转换为数字
return +(this.getCost() * this.getQuantity()).toFixed(2);
↑
当您将"1.20" 转换为数字时，它将“删除”额外的0，返回1.2。
要以 2 位小数显示结果，您可以将结果作为字符串返回，这样0 就不会被截断，或者使用管道。
您可以使用number pipe
{{ 1.20 | number:'1.2-2' }}
格式：{minIntegerDigits}.{minFractionDigits}-{maxFractionDigits}
minIntegerDigits 是要使用的最小整数位数。默认为 1。minFractionDigits 是小数后的最小位数。默认为 0。maxFractionDigits 是小数后的最大位数。默认为 3。使用管道，您可以让您的代码返回一个数字，并且它只会在您将其显示在屏幕上时更改该值的格式。
【讨论】：
0 就不会被切断。
我不知道我是否正确理解了这个问题，但我理解的是你想强制输入包含小数点后的两位数字。这是一个尝试： 您需要将数字转换为浮点类型，并且您希望将其固定为两位小数，请使用 toFixed 方法。
Number.parseFloat(x).toFixed(2)
//Where x is the number which needs to be converted to a float type.
我希望这会有所帮助。
【讨论】：
最后我没有找到正确的答案...
我所做的是创建以下函数
fixDecimals(value : string){
value = "" + value;
value = value.trim();
value = parseFloat(value).toFixed(2);
return value;
}
我将输入类型更改为文本（而不是数字）。
我在 ngOnInit 中调用这个函数，所以我总是向用户显示带有小数的数字。唯一悬而未决的是，如果用户更改值并删除小数，则数字将不会以对应的 00 补全。
我尝试使用 onChange，但提示转到输入的末尾（这对用户来说非常尴尬）
【讨论】：
如果您的输入在一个表单中，名称为：inputForm，例如
HTML
<form [formGroup]="inputForm">
<input name="number" (keyup)="fixNumber()" pattern="^[0-9]+(\.[0-9]{1,2})?" step="0.01" `enter code here`formControlName="number" type="button" class="form-control" id="number">
</form>
TS
public fixNumber(){
let value =this.inputForm.get('number').value;
let prefix:string = value.toString().split('.')[0];
let suffix:string = value.toString().split('.')[1];
if(suffix.length > 2){
let suffix_subed = suffix.substr(0,2);
let new_value = prefix+'.'+suffix_subed;
this.inputForm.get('number').setValue(new_value);
}
}
您可能会遇到一些日志错误，但我认为对于该解决方法来说这并不是什么大问题
【讨论】：
使用这个管道
{{ 数字 |数字：'1.2-2'}}
【讨论】：
在 Angular 2 中有 DecimalPipe 这将有助于您的要求。请使用它。 示例：
Use format '3.2-5' :
minIntegerDigits = 3
minFractionDigits = 2
maxFractionDigits = 5
num = 12.324324
{{num1 | number:'3.2-5'}}
012.63847
【讨论】：
十进制管道
DecimalPipe 是一个 Angular Pipe API，属于 CommonModule。 DecimalPipe 用于根据语言环境规则将数字格式化为十进制数。它使用带有管道运算符的数字关键字。找到语法。
number_expression | number[:digitInfo]
最后我们得到一个十进制数作为文本。找到说明。 number_expression：将给输出一个数字的角度表达式。 number ：与管道运算符一起使用的管道关键字。 digitInfo : 定义数字格式。
现在我们将了解如何使用 digitInfo。 digitInfo 的语法如下。
{minIntegerDigits}.{minFractionDigits}-{maxFractionDigits}
找到描述。
minIntegerDigits : Minimum number of integer digits. Default is 1.
minFractionDigits : Minimum number of fraction digits. Default is 0.
maxFractionDigits : Maximum number of fraction digits. Default is 3.
【讨论】：