angular2 toString 方法中的数字格式如何具体？答案

【问题标题】：how specific a number format in angular2 toString method?angular2 toString 方法中的数字格式如何具体？
【发布时间】：2017-04-08 12:16:48
【问题描述】：

我想在 angular2 应用程序中格式化我的号码。我希望永远是 8 个数字。前任。如果我插入：

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

我搜索但我只找到了我不能用于这种情况的管道。谢谢

【问题讨论】：

标签： typescript angular2-pipe

【解决方案1】：

您可以创建一个以零完成的函数

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

    return s;
}

在你的情况下，大小 = 8

【讨论】：

【解决方案2】：

pad-start-polyfill.ts

polyfill 来自：

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

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

模板使用.html

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

【讨论】：

【解决方案3】：

一个更简单的方法是合并上面的两个响应

your-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 导入您想使用的地方

some-page.component.ts

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

【讨论】：