Question

我想在angular2 app中格式化我的号码。我希望永远是8个数字。恩。如果我插入：

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

我搜索但我发现只能用于这种情况的管道。 thaks

Answer 1

<强>垫 - 开始 - 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

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

<强>垫-start.pipe

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

<强> temaplate-usage.html中

.row
{
width:100%;

}
 .col-md-12,.slideNumber
{
width:100%;
display:flex;
margin-right:50px;
}

.box
{
width:50px;
height:50px;
background:gray;
text-align:center;
line-height: 50px;
vertical-align: middle;
}

Answer 2

您可以创建一个用零填充的函数

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

    return s;
}

在您的情况下，size = 8

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> 

angular2 toString方法中的数字格式有多具体？

3 个答案: