Angular2 показать два десятичных знака на входе

Я бы предложил вам использовать маску на поле ввода есть пакет текст-маска что я использовал раньше и работает!

Примечание: взгляните на вас тип ввода html, вы сказали, что это номер, но на самом деле в вашем вопросе тип-кнопка

использовать пакет:

1. установить пакеты

   npm i angular2-text-mask text-mask-addons --save

2. импортировать его в приложение-модуль файл

   import { TextMaskModule } from 'angular2-text-mask';
   
   @NgModule({
     imports: [
       /* ... */
       TextMaskModule
     ]
     /* ... */
   })
   export class AppModule { }
   

3. В вам компонентов.ТС

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

4. в своем компоненте.HTML-код

   <input type="text" [textMask]="{mask: currencyMask}" name="receivedName" id="received" class="form-control" maxlength="50" [(ngModel)]="price"/>
   

tl; dr; Вариант 1: верните строку, не преобразуйте в число. Вариант 2: Используйте числовую трубу.

toFixed возвращает строку.

вы конвертируете результат toFixed ряд

return +(this.getCost() * this.getQuantity()).toFixed(2);
       ↑

при конвертации "1.20" к числу он "удалит" дополнительный 0 возвращение 1.2.

чтобы показать результат с 2 десятичными знаками, вы можете вернуть результат в виде строки, поэтому 0 не отрезается или не использует труба.

можно использовать номер трубы

{{ 1.20 | number:'1.2-2' }}

• minIntegerDigits - минимальное количество целых цифр для использования. По умолчанию 1.
• minFractionDigits минимальное количество цифр после дроби. По умолчанию 0.
• maxFractionDigits максимальное количество цифр после дроби. По умолчанию 3.

С трубой вы можете сохранить свой код, возвращающий номер, и он будет измените формат значения только при отображении его на экране.

в угловой 2 есть DecimalPipe это будет полезно для вашего требования.Пожалуйста, используйте его. Пример:

Use format '3.2-5' : 

minIntegerDigits = 3 
minFractionDigits = 2 
maxFractionDigits = 5 

num = 12.324324

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

012.63847 

Я не знаю, правильно ли я понял проблему, но я понял, что вы каким-то образом хотите заставить вход содержать две цифры после десятичной. Вот попытка: Вам нужно преобразовать число в тип float и, как вы хотите, чтобы он был исправлен до двух десятичных точек, используйте метод toFixed.

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

надеюсь, это поможет.

Если ваш вход находится внутри формы с именем: inputForm e.g

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

вы можете получить некоторые erros журнала, но я думаю, что это не большой мертвый для этого обходного пути

Используйте Эту Трубу

{{номер / номер : '1.2-2'}}

DecimalPipe

DecimalPipe-это API угловой трубы и принадлежит CommonModule. DecimalPipe используется для форматирования числа в виде десятичного числа в соответствии с правилами локали. Он использует ключевое слово number с оператором трубы. Найдите синтаксис.

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.