Angular2 pokazuje dwa miejsca po przecinku na wejściu

Question

Mam aplikację kątową2, która po zliczeniu musi pokazać ZAWSZE dwa miejsca po przecinku w danych wejściowych. Ale chociaż w elemencie wymuszam mieć dwa miejsca po przecinku, w danych wejściowych pokazuje on zero, a po nim dziesiętny lub dziesiętny, ale potrzebuję tylko dwóch.

W regulatorze wymusić mieć dwóch miejsc po przecinku w ten sposób

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

Ale kiedy pokazują, że wynik może mieć inny rozmiar dziesiętnych

<input name="number" pattern="^[0-9]+(\.[0-9]{1,2})?" step="0.01" formControlName="number" type="button" class="form-control" id="number" > 

dodając, że ja, używam maszynopis a typem pola jest liczba (co, jak sądzę, powoduje zaokrąglenie)

Answer 1

Na koniec did't znaleźć właściwą odpowiedź ...

Co zrobiłem było stworzenie następującą funkcję

fixDecimals(value : string){ 
    value = "" + value; 
    value = value.trim(); 
    value = parseFloat(value).toFixed(2); 
    return value; 
    } 

I zmienił typ wejścia do tekstu (zamiast numeru).

I nazywam tę funkcję w ngOnInit, więc zawsze pokazuję liczbę z dziesiętnymi dla użytkownika. Jedyną oczekującą rzeczą jest to, że jeśli użytkownik zmieni wartość i zlikwiduje liczby dziesiętne, numer ten nie zostanie uzupełniony o odpowiadający 00.

Próbowałem przy pomocy zmiany, ale monit przechodzi do końca wprowadzania danych (który jest bardzo niebezpieczny dla użytkownika)

Answer 2

W kanciastym 2 ma DecimalPipe będzie to pomocne dla Twojego wymagania. Użyj go. Próbka:

Use format '3.2-5' : 

minIntegerDigits = 3 
minFractionDigits = 2 
maxFractionDigits = 5 

num = 12.324324 

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

012.63847 

Answer 3

Nie wiem czy zrozumiałem problem poprawnie, ale co ja zrozumiałem to w jakiś sposób chcą wymusić wejście zawierać dwóch miejsc po przecinku. Oto jedna z metod: Konwertuj liczbę na typ zmiennoprzecinkowy i jeśli chcesz, aby była ona ustawiona na dwie kropki dziesiętne, użyj metody FIXed.

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

Mam nadzieję, że to pomoże.

Answer 4

Proponuję użyć maski na polu wprowadzania danych, jest pakiet text-mask, którego użyłem wcześniej i działa!

Uwaga: spojrzeć na ciebie html typ wejścia, powiedział pan, że to liczba, ale faktycznie w swoim pytaniu typ jest przycisk

Aby skorzystać z pakietu:

1. Zainstaluj pakiet

   npm i angular2-text-mask --save

2. importu go złożyć app-modułu

   import { TextMaskModule } from 'angular2-text-mask';

3. W Tobie component.ts

   import createNumberMask from 'text-mask-addons/src/createNumberMask'; 
   
   @Component({ 
       selector: 'app-my-component', 
       templateUrl: './my-component.html', 
       styleUrls: ['./my.component.scss'] }) 
   
       export class MyComponent implements OnInit { 
       public price = 0; 
   
       private currencyMask = 
       { 
       prefix: '', 
       suffix: '', 
       includeThousandsSeparator: true, 
       thousandsSeparatorSymbol: ',', 
       allowDecimal: true, 
       decimalSymbol: '.', 
       decimalLimit: 2, 
       integerLimit: null, 
       requireDecimal: false, 
       allowNegative: false, 
       allowLeadingZeroes: false }; 
   
   } 
   

4. W swojej component.html

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

Answer 5

Jeśli wejście jest wewnątrz formy z nazwa: 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); 
     } 
} 

Można uzyskać pewne erros dziennika, ale myślę, że nie jest to duży martwy dla tego obejścia

Answer 6

tl; dr; Opcja 1: zwróć ciąg znaków, nie konwertuj na liczbę. Opcja 2: Użyj rury numerowej.

toFixed zwraca ciąg znaków.

konwertowania wynik toFixed do numeru

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

Podczas konwersji "1.20" do numeru będzie „usuń” ekstra 0 powrocie 1.2.

Aby pokazać wynik z 2 miejscami po przecinku, możesz zwrócić wynik jako ciąg znaków, aby 0 nie został obcięty lub użyć rury.

Można użyć formatu number pipe

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

: {minIntegerDigits}.{minFractionDigits}-{maxFractionDigits}

• minIntegerDigits jest minimalna liczba cyfr całkowitych używać. Domyślne wartości to 1.
• minFractionDigits to minimalna liczba cyfr po ułamku. Domyślnie 0.
• maxFractionDigits to maksymalna liczba cyfr po ułamku. Wartość domyślna to 3.

Za pomocą rury można zachować kod zwracający liczbę, a zmieni ona tylko sposób sformatowania wartości po wyświetleniu jej na ekranie.

Answer 7

Użyj tej rury

{{liczba | Nr: '1,2-2'}}

Answer 8

DecimalPipe

DecimalPipe jest kątowa rury API i należy do CommonModule. DecimalPipe służy do formatowania liczby jako liczby dziesiętnej zgodnie z regułami lokalizacji. Używa słowa kluczowego liczbowego z operatorem potoku. Znajdź składnię.

number_expression | number[:digitInfo] 

Wreszcie otrzymujemy liczbę dziesiętną jako tekst. Znajdź opis. number_expression: Wyrażenie kątowe, które da wynik liczbowy. Numer : Słowo kluczowe rury, które jest używane z operatorem potoku. digitInfo: Definiuje format liczb.

Teraz zrozumiemy, jak korzystać z digitInfo. Składnia dla digitInfo jest następująca.

{minIntegerDigits}.{minFractionDigits}-{maxFractionDigits} 

Znajdź opis.

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.