web-dev-qa-db-fra.com

séparateurs de milliers en angle 2

j'ai essayé celui-ci dans mon projet:

<div padding *ngIf="TotalAPagar">
    $ {{TotalAPagar | number }}  
</div>

ma variable s'appelle TotalAPagar, et j'utilise un nombre pipe, mais elle montre la valeur comme ceci 1 000 500 .

J'ai besoin de cela pour changer la convention de numérotation en dots. Par exemple. 1.000.000

Je lisais dans les docs dans angular mais je n’ai aucun exemple.

angulartypescriptionic2
6
Daniel

Après avoir lu dans des forums et des documents sur js et javascript angulaires, j’ai trouvé une méthode qui met les nombres en format et en devise, cette méthode est toLocaleString (), est une méthode de javascript qui permet de la définir dans la devise ou le langage dont vous avez besoin. .

je recherche le nom du pays dont j'ai besoin avec la méthode et me montre les informations dont vous avez besoin. ( http://www.localeplanet.com/icu/es-CO/ ), dans mon cas était la Colombie.

dans mes fonctions, je dois simplement ajouter le .toLocaleString ('es-CO') au résultat et mettre la valeur avec la devise spécifiée.

par exemple:

this.TotalAPagar = (this.calcularDescuentosLiquidacion (this.TotalDevengadoValor, this.sueldoPendientePorCancelarValor, this.item.libranza, this.itest.prestamo_empleado) + this.al. item.fecha_fin_contrato, this.item.fecha_inicio_contrato)). toLocaleString ('es-CO');

3
Daniel

Je pense qu'il y a deux façons de résoudre ce problème: 

1. Vous pouvez essayer de remplacer DecimalPipe à partir de la bibliothèque @ angular/common:

De cette façon: 

point-replacer.pipe.ts 

import { Pipe } from '@angular/core';
import {DecimalPipe} from "@angular/common";

@Pipe({
    name: 'pointReplacer'
})
export class PointReplacerPipe extends DecimalPipe {

  transform(value: any, digits?: string): string {
        return super.transform(value, digits).replace(',', '.');


    }
}

et dans votre code html :

<div padding *ngIf="TotalAPagar">
    $ {{TotalAPagar | pointReplacer }}  
</div>

2. Vous pouvez écrire votre propre pipe, qui remplace les caractères et utiliser ** double pipe dans votre code html **

Essayez de cette façon: 

point-replacer.pipe.ts 

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

@Pipe({
    name: 'pointReplacer'
})

export class PointReplacerPipe implements PipeTransform {
    transform(value: string, args: any[]): string {
        if(value) {
          return value.replace(',', '.');
        }
        return '';
    }
}

et dans votre code html :

<div padding *ngIf="TotalAPagar">
    $ {{TotalAPagar | number | pointReplacer }}  
</div>

Quelle que soit la méthode choisie, n'oubliez pas de déclarer votre propre module pipe in, où vous l'utilisez:

@NgModule({
  declarations: [PointReplacerPipe],
  providers: [PointReplacerPipe]
})
4
Jaroslaw K.

Je pense que c'est une solution plus propre:

Importer LOCALE_ID dans app.modules.ts

import {ErrorHandler, NgModule, LOCALE_ID} from '@angular/core';

et définir dans les fournisseurs comme ceci:

  providers: [
    PouchServiceProvider,
    DbProvider, {
      provide: LOCALE_ID,
      useValue: "nl-NL"
    }
  ]

cela choisira automatiquement l'identifiant du séparateur, basé sur local_id

2
kabus