Угловой 2 ставит пробел между числами в соответствии с длиной числа

Один из вариантов - использовать регулярное выражение: идентифицировать каждую позицию в строке так, чтобы за 3 цифрами, или 6 цифрами, или 9 цифрами и т. д. Позже следовал конец строки:

const spaces = price => String(price)
  .replace(
    /(?!^)(?=(?:\d{3})+$)/g,
    ' '
  );

for (let i = 1; i < 1e10; i *= 10) {
  console.info(spaces(i));
}

(?!^)(?=(?:\d{3})+$) означает:

• (?!^) - отрицательный просмотр вперед для ^ - убедитесь, что эта позиция не является началом строки
• (?=(?:\d{3})+$) - Положительный прогноз для:
  • (?:\d{3})+ - Цифровые символы повторяются 3 раза
  • $ - за ним следует конец строки

Я создал специальный канал Angular для управления и отображения таких чисел с пробелом.

Цель состоит в том, чтобы иметь общий метод, который может преобразовывать один вход (число) и преобразовывать его в то, что я хочу (форматированное число). Угловые трубы производятся и отлично подходят для этого.

Вот образец, вы можете вдохновиться им и брать только то, что хотите.

Я использовал евклидово деление, чтобы управлять числами любой длины.

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

@Pipe({
  name: 'formatNumber'
})
export class FormatNumberPipe implements PipeTransform {

  transform(value: any): string {
    if (value) {
      // Gets the value as a string
      if (typeof value !== 'string') {
        value = value.toString();
      }
      // Delete existing spaces
      while ((value as string).indexOf(' ') !== -1) {
        value = (value as string).replace(' ', '');
      }

      // Manage decimal values
      let integerPart: string = value;
      if (value.indexOf('.') !== -1) {
        integerPart = value.slice(0, value.indexOf('.'));
      }
      if (value.indexOf(',') !== -1) {
        integerPart = value.slice(0, value.indexOf(','));
      }

      let firstSlice = true;
      const arrayResults: Array<string> = [];
      let finalResult = '';

      const divisor = 3;
      const dividend: number = integerPart.length;
      let remainder = dividend % divisor;
      let quotient = (dividend + remainder) / divisor;

      if (dividend >= 3) {
        do {
          if (firstSlice && remainder > 0) {
            // Manage numbers with remainders
            firstSlice = false;
            arrayResults.push(integerPart.slice(0, remainder));
          } else {
            // Slice each part of the number to an array
            firstSlice = false;
            arrayResults.push(integerPart.slice(remainder, remainder + divisor));
            remainder = remainder + divisor;
            quotient--;
          }
          // Continue dividing the number while there are values
        } while (quotient >= 1);

        // Concats the sliced parts to build the final number
        arrayResults.forEach(part => {
          finalResult += `${part} `;
        });
        // Delete any trailing whitespace
        finalResult = finalResult.trim();
        return finalResult;
      } else {
        return value;
      }
    }
    return value;
  }
}

Как только канал будет готов, вы можете использовать его, как хотите, в своем приложении:

Либо прямо в вашем шаблоне:

<input [ngModel] = "value | formatNumber" (ngModelChange) = "value = $event">

Или в вашем коде напрямую, используя Dependency Injection of the pipe:

this.sommeFormat.totalValue = this.formatNumber.transform(this.somme.totalValue);

Вот официальная документация по Angular pipe: https://angular.io/guide/pipes