web-dev-qa-db-fra.com

Affiche le nombre en millions ou en milliers dans le format angulaire 4

J'essaie d'afficher le format numérique dans mon application angulaire 4. Fondamentalement, ce que je regarde est si le nombre est de 12,23 millions alors il devrait afficher Par exemple 12,2 M (Une décimale)

Si le nombre est 50.000.123 puis 50.1K

Comment puis-je atteindre cela en angulaire. Dois-je écrire une directive? Y a-t-il des tuyaux incorporés dans angular?

structure

export interface NpvResults  {

            captiveInsYear: number[];
            captiveInsPremiumPaid: number[];
            captiveInsTaxDeduction: number[];
            captiveInsLoanToParent: number[];
            captiveInsCapitalContribution: number[];
            captiveDividentDistribution: number[];
            captiveInsTerminalValue: number[];

        }

Le tableau est initialisé à la valeur suivante

this.sourceResults.captiveInsPremiumPaid = [1,2,3,4,5];

Le html

<td *ngFor= "let item of NpvResults.captiveInsPremiumPaid" >{{item}}</td>
angularangular-pipe
4
Tom

vous pouvez créerPIPE

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'thousandSuff'
})
export class ThousandSuffixesPipe implements PipeTransform {

  transform(input: any, args?: any): any {
    var exp, rounded,
      suffixes = ['k', 'M', 'G', 'T', 'P', 'E'];

    if (Number.isNaN(input)) {
      return null;
    }

    if (input < 1000) {
      return input;
    }

    exp = Math.floor(Math.log(input) / Math.log(1000));

    return (input / Math.pow(1000, exp)).toFixed(args) + suffixes[exp - 1];


  }

}

mettre en œuvre dans la vue

{{ model | thousandSuff  }} <!-- 0 decimals -->

{{ model | thousandSuff : 2  }}  <!-- X decimals -->

résultat 

{{22600000 | milleSuff}} -> 23M 

{{22600000 | Mille Poissons: 2}} -> 22,60 M

14
mQuiroz

Ici je viens de vous donner une idée d'abord créer 
Html
{{number | shortNumber}}
vous pouvez créer votre propre custom pipe filter dans lequel vous pouvez passer votre numéro dans le tuyau, puis vous pouvez faire du code comme ci-dessous, insérez cette logique dans votre tuyau personnalisé.

Filtre de tuyau 

getformat(){
    if(number == 0) {
    return 0;
}
else
{        
  // hundreds
  if(number <= 999){
    return number ;
  }
  // thousands
  else if(number >= 1000 && number <= 999999){
    return (number / 1000) + 'K';
  }
  // millions
  else if(number >= 1000000 && number <= 999999999){
    return (number / 1000000) + 'M';
  }
  // billions
  else if(number >= 1000000000 && number <= 999999999999){
    return (number / 1000000000) + 'B';
  }
  else
    return number ;
  }
}

vous pouvez faire comme ceci.Pour créer un tuyau personnalisé, vous pouvez vous référer à ce site cliquez ici

1
Brijesh Mavani