javascript - Angular2 visa två decimaler i inmatning

Jag har en Angular2-app som alltid måste visa två decimaler i inmatningar efter vissa beräkningar. Men även om jag i komponenten tvingar fram två decimaler, visas det i inmatningen med noll decimaler, en decimal eller de decimaler som talet har, men det jag behöver är att alltid visa två.

I controllern tvingar jag att ha två decimaler på detta sätt

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

Men när jag visar det kan resultatet ha olika antal decimaler

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

Lägger till att jag använder TypeScript och fälttypen är number (vilket jag tror orsakar avrundningen)

Svar #1

Jag skulle föreslå att du använder en mask på inmatningsfältet, det finns ett paket text-mask som jag har använt tidigare och det fungerar!

Obs: titta på ditt html input-typ, du sa att det är nummer, men faktiskt i din fråga är typen knapp

För att använda paketet:

  1. Installera paketen

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

  2. Importera det i din app-modulfil

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

@NgModule({
  imports: [
    /* ... */
    TextMaskModule
  ]
  /* ... */
})
export class AppModule { }

  3. I din 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
  });

}

  4. I din component.html

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

Svar #2

tl;dr; Alternativ 1: returnera en sträng, konvertera inte till ett nummer. Alternativ 2: Använd ett sifferrör.

toFixed returnerar en sträng.

Du konverterar resultatet av toFixed till ett nummer

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

När du konverterar "1.20" till ett tal kommer det att "ta bort" den extra 0 och returnera 1.2.

För att visa resultatet med 2 decimaler kan du returnera resultatet som en sträng så att 0 inte blir bortklippt, eller använda ett pipe-tecken.

Du kan använda nummerpipen

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

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

  • minIntegerDigits är det minsta antalet heltalssiffror som ska användas. Standardvärdet är 1.
  • minFractionDigits är det minsta antalet siffror efter decimalen. Standardvärdet är 0.
  • maxFractionDigits är det maximala antalet siffror efter decimalpunkten. Standardvärdet är 3.

Med pipen kan du låta din kod fortsätta returnera ett nummer och det kommer bara att ändra hur värdet formateras när du visar det på skärmen.

Relaterade artiklar