web-dev-qa-db-fra.com

Comment définir les paramètres régionaux pour les nombres dans angular 2.0

Le format numérique en suisse allemand est comme "100'000.00" (pas "100,000.00"). Comment puis-je changer cela? J'ai essayé de changer les paramètres de number_pipe.js d'en-US en de-CH sans succès.

var defaultLocale: string = 'de-CH';

Existe-t-il une solution de contournement ou dois-je implémenter mon propre canal?

angularnumberslocaleangular2-pipe
10
surfspider

Essayez d'utiliser le numéro-local . Pipe.ts ou

vous pouvez créer un tuyau simple basé sur NumeralJs pour formater les nombres

https://github.com/adamwdraper/Numeral-js

2
AngJobs on Github

Si vous n'avez besoin que d'un seul paramètre régional pour votre application, vous pouvez dès maintenant (@angular ~ 2.4.0) enregistrer le fournisseur de paramètres régionaux dans @NgModule.

@NgModule({
    ...
    providers: [
        {provide: LOCALE_ID, useValue: "de-CH"}
    ]
})
export class AppModule {}
11
mikevinmike

Voici ma solution et cela aidera quelqu'un.

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

@Pipe({
  name: 'amountConverter'
})
export class AmountConverterPipe implements PipeTransform {

  transform(value: number | string, locale?: string): string {
    return new Intl.NumberFormat(locale, {
      minimumFractionDigits: 2
    }).format(Number(value));
  }

}

Dans le html, vous pouvez utiliser comme suit

 <span class="strong">{{Price  | amountConverter:locale}}</span>

Le format des nombres changera en fonction de la valeur des paramètres régionaux.

Veuillez consulter https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/NumberFormat pour plus de détails.

3
Janith Widarshana

La meilleure option pour moi était le fameux package https://www.npmjs.com/package/numeral . (il travaille avec la même logique du moment.js)

Pour l'installer: npm i [email protected] et avec les types npm i --save-dev @types/[email protected]

Dans votre fichier ts, vous pouvez utiliser comme suit:

`R$ ${numeral(<your-model-value>).value().toLocaleString()}`

Pour le modèle HTML, vous pouvez créer un Pipe comme ceci:

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

@Pipe({
  name: 'numberLocale'
})
export class NumberLocalePipe implements PipeTransform {

  transform(value: any, args?: any): any {

    const numeralNumber = numeral(value);

    return numeralNumber.value().toLocaleString();
  }
}

De plus, pour devise (et locales) une bonne stratégie est d'utiliser le package ng2-currency-mask pour les masques de devises en HTML (mais sur les fichiers ts vous pouvez "traduire" la valeur liée dans le modèle avec numeral before save votre objet modèle.

En utilisant ng2-currency-mask sur le modèle HTML:

<input [(ngModel)]="model.value"
   [options]="{ prefix: 'R$ ', thousands: '.', decimal: ',' }"
   allowNegative="false" currencyMask>

Et sur ts avant sauvez le modèle:

if(this.model.value)
   this.model.value = numeral(this.model.value).value();

https://github.com/cesarrew/ng2-currency-mask

0
Richard Lee