Как указать локаль разделитель тысяч для номера pipes в Angular 4

Ответ 1

Угловой 5+

Начиная с Angular 5, аргумент локали был добавлен в десятичную трубу, как вы можете видеть в официальной документации: https://angular.io/api/common/DecimalPipe. Это означает, что вы можете выбрать свой язык непосредственно при вызове канала, например:

{{p.total | number:'':'fr-FR'}}

Просто учтите, что также изменится десятичный разделитель.

Угловой 2+

или если вы хотите изменить ТОЛЬКО разделитель тысяч...

Согласно документации Angular для DecimalPipe: https://v2.angular.io/docs/ts/latest/api/common/index/DecimalPipe-pipe.html, нет явного аргумента, который можно добавить к вызову канала исключительно изменить символы, используемые для форматирования.

Если вы не хотите менять локаль или связанные значения по умолчанию для всего вашего проекта, я думаю, что ваш лучший способ - написать собственный канал, посвященный вашему особому случаю. Не волнуйтесь, трубы очень легко писать.

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

@Pipe({
  name: 'numberfr'
})
export class FrenchDecimalPipe implements PipeTransform {

  transform(val: number): string {
    // Format the output to display any way you want here.
    // For instance:
    if (val !== undefined && val !== null) {
      return val.toLocaleString(/*arguments you need*/);
    } else {
      return '';
    }
  }
}

Не забудьте добавить его в NgModule, чтобы использовать его.

Ответ 2

Для номера: 1234567

Используйте следующую трубу:

{{element.total | number: '.2'}} номер 2'}}

Для производства 1 234 567,00

И используйте следующую трубу:

{{element.total | number: '2.'}} номер 2.'}}

Чтобы избавиться от лишних 0 и произвести 1 234 567

-------------------------------------------------- --------------------------------------

Обратите внимание, что "2" указывает количество целых чисел после десятичной дроби.

Когда значение 0 загружается в таблицу, например, с использованием этого канала, отображаемое значение будет равно "00" (из-за "2").

Чтобы решить эту проблему, используйте "1". вместо этого, когда входное значение равно 0.

Ответ 3

Следующее - мое решение, и оно кому-то поможет.

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));
  }

}

Количество цифр можно изменить, изменив значение MinomFractionDigits. В HTML вы можете использовать следующим образом

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

Числовой формат будет меняться в зависимости от значения локали.

Пожалуйста, обратитесь к https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/NumberFormat для более подробной информации.

Ответ 4

Вы можете использовать локаль, как в этом примере, протестированном с Angular 6.0.2:

card-component.ts

import { registerLocaleData } from '@angular/common';
import es from '@angular/common/locales/es';
import { Component, OnInit } from '@angular/core';

@Component( {
  selector: 'app-card',
  templateUrl: './card.component.html',
  styleUrls: [ './card.component.css' ]
} )
export class CardComponent implements OnInit {

  value = 1234567.987;

  constructor() { }

  ngOnInit() {
    registerLocaleData( es );
  }

}

card-component.html

<!-- result: 1.234.567,987 -->
<span>{{ value | number:'':'es' }}</span>

Вы можете просмотреть другие возможности в официальных документах https://angular.io/api/common/DecimalPipe и https://angular.io/guide/i18n#setting-up-the-locale-of-your-app.

Ответ 5

Вы можете написать собственный канал для этого.

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

@Pipe({name: 'seprator'})
export class Seprator implements PipeTransform {
  
  constructor() {

  }

  transform(value: string, unit: string): string {

    if(value == undefined)
    {
        return '';
    }
    let n = parseInt(value);

    const rx =  /(\d+)(\d{3})/;
    return String(n).replace(/^\d+/, function (w) {
        var res = w;
        while (rx.test(res)) {
            res = res.replace(rx, '$1٬$2');
        }
        return res;
    });

  }
}

Ответ 6

Используйте номер шаблона с локалью в шаблоне:

{{myDigit | number:'':'en'}}

Первый '' для десятичной, если вы хотите настроить.

Ответ 7

Я знаю, что это может быть поздно, но надеюсь, что это поможет. угловой 2 и выше

import { DecimalPipe } from '@angular/common';
import { Component, OnInit } from '@angular/core';

@Component( {
  selector: 'app-card',
  templateUrl: './card.component.html',
  styleUrls: [ './card.component.css' ]
} )
export class CardComponent implements OnInit {

 value = 1234567.987;

 constructor(private decimalPipe: DecimalPipe) { }

 ngOnInit() {
   //here is how to get it
   let newValue = this.decPipe.transform(this.value, '.2');
   //you can now use the newValue
   }

 }

Если вы хотите это в html, просто сделайте:

{{ value | number: '.2'}}