Насколько конкретно числовой формат в методе angular2 toString?

Question

Я хочу отформатировать свой номер в приложении angular2. Я хочу всегда быть из 8 номеров. ех. если я вставлю:

 12345678 -> 12345678
 123 -> 00000123
 123456 -> 00123456
 123456789 ->i'll display a modal error or message(don't care of this)

Я ищу, но нахожу только трубы, которые не могу использовать для этого случая. Thaks

Answer 1

Вы можете создать функцию для дополнения нулями

function pad(num, size) {
    var s = num + "";
    while (s.length < size)
       s = "0" + s;

    return s;
}

В вашем случае размер = 8

Answer 2

PAD-старт-polyfill.ts

полифилл из:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/padStart)

декларация от:

https://github.com/Microsoft/TypeScript/blob/master/lib/lib.es2017.string.d.ts

interface String {
  padStart(targetLength: number, padString?: string): string;
}

// https://github.com/uxitten/polyfill/blob/master/string.polyfill.js
// https://developer.mozilla.org/enUS/docs/Web/JavaScript/Reference/Global_Objects/String/padStart

if (!String.prototype.padStart) {
  String.prototype.padStart = function padStart(targetLength, padString) {
    targetLength = targetLength >> 0; //floor if number or convert non-number to 0;
    padString = String(padString || ' ');
    if (this.length > targetLength) {
      return String(this);
    }
    else {
      targetLength = targetLength-this.length;
      if (targetLength > padString.length) {
        padString += padString.repeat(targetLength/padString.length); //append to original to ensure we are longer than needed
      }
      return padString.slice(0, targetLength) + String(this);
    }
  };
}

подушечка-start.pipe

import 'pad-start-polyfill';
import {Pipe} from '@angular/core';

@Pipe({name: 'padStart'}) export default class {
  transform(value: string, targetLength: number, padString = ' ') {
    return value.padStart(targetLength, padString);
  }
}

temaplate-usage.html

<span>
  {{value | padStart : 8 : '0'}}
</span>

Answer 3

Более легкий способ сделать это - объединить два ответа выше

ваш-pipe.pipe.ts

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

@Pipe({
    name: 'minimalLenthNumber'
})
export class MinimalLenthNumberPipe implements PipeTransform {
    transform(num : number, size: number) : string {
        var s = num + "";
        while (s.length < size)
            s = "0" + s;
        return s;
    }
}

при импорте модулей, не пропустите импорт этого канала, в моем случае у меня есть файл app.module.ts, в котором есть все модули моего приложения

app.module.ts

import { MinimalLenthNumberPipe } from './pipes/minimal-lenth-number.pipe';

@NgModule({
    MinimalLenthNumberPipe
}

затем импортируйте MinimalLenthNumberPipe, где вы хотите его использовать

некоторые-page.component.ts

<some-tag> {{ 12 | minimalLenthNumber:  4 }} </some-tag>
<!-- the final result will be '0012'-->