我有一个angular2应用程序,需要在一些计算后在输入中显示总共两位小数.但是虽然在组件中我强制有两个小数,但在输入中它显示的是零decinmal,一个十进制或数字所包含的小数,但我需要的是始终显示两个.
在控制器中,我强制以这种方式得到两位小数
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和字段类型是数字(我认为导致舍入)
解决方法
我建议你在输入字段上使用一个掩码有一个我以前用过的包
text-mask并且有效！
注意：看看你的html输入类型,你说的是数字,但实际上在你的问题中类型是按钮
要使用该包：
>安装包
npm i angular2-text-mask text-mask-addons –save
>将其导入您的app-module文件
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"/>
