使用 Angular 管道将一位数变成两位数

Question

我想让 1 在 html 上看起来像 01 并且 11 看起来像 11。

如果有这样的过滤器，谁能帮帮我。这是一个示例 demo code

Answer 1

您可以只使用 padStart 方法在字符串的开头添加特定字符，直到达到特定长度。

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

@Pipe({
  name: 'numberFormat'
})
export class NumberformatComponent implements PipeTransform {

  constructor() { }

   transform(n: string) {
     return n.padStart(2, '0');
   }
}

Answer 2

Angular 提供 Decimal Pipes for these kind of situations. See a similar answer .

<span>{{ number | number:'2.0' }}</span>

Decimal Pipe 的参数接受代表您所需格式的字符串。根据 docs，格式如下所示：

number: '{minIntegerDigits}.{minFractionDigits}-{maxFractionDigits}'

Where:

minIntegerDigits: The minimum number of integer digits before the decimal point. Default is 1.

minFractionDigits: The minimum number of digits after the decimal point. Default is 0.

maxFractionDigits: The maximum number of digits after the decimal point. Default is 3.

使用 Angular 管道将一位数变成两位数

Making one digit number as two digit using Angular Pipes

angular-pipe

angular