Question

我有一个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，字段类型是数字（我认为这会导致舍入）

Answer 1

我建议你在输入字段上使用一个掩码有一个我以前用过的包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"/>

Answer 2

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。

使用管道，您可以让代码返回一个数字，只会在屏幕上显示时更改值的格式。

Answer 3

最后我找不到合适的答案......

我所做的是创建以下功能

.left-corner{
  width: 0;
  height: 0;
  border-top: 120px solid red;
  border-left: 120px solid transparent;
  
  position:relative;
}

.left-corner:before {
  content: "";
  
  position:absolute;
  top:-120px;
  left:-100px;
  
  border-top: 100px solid powderblue;
  border-left: 100px solid transparent;
}

我将输入类型更改为文本（而不是数字）。

我在ngOnInit中调用此函数，因此，我总是向用户显示带小数的数字。唯一悬而未决的事情是，如果用户更改了值并删除了小数，则数字将不会与相应的00完成。

我尝试使用onChange，但提示输入结束（这对用户来说非常尴尬）

Answer 4

在角度2中有DecimalPipe，这将有助于您的要求。请使用它。样品：

Use format '3.2-5' : 

minIntegerDigits = 3 
minFractionDigits = 2 
maxFractionDigits = 5 

num = 12.324324

{{num1 | number:'3.2-5'}} 

012.63847

Answer 5

我不知道我是否正确理解了这个问题，但我理解的是你想要强制输入在小数后包含两位数。这是一个尝试：您需要将数字转换为浮点类型，并且您希望将其固定为两个小数点，使用toFixed方法。

Number.parseFloat(x).toFixed(2)
//Where x is the number which needs to be converted to a float type.

我希望这会有所帮助。

Answer 6

如果您的输入位于名称为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);
      }
}

你可能会得到一些日志错误，但我认为这种解决方法并不是很重要

Answer 7

使用此管道

Answer 8

<强> DecimalPipe

DecimalPipe是一个角度管道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.

Angular2在输入中显示两位小数

8 个答案: