Question

我正在使用Angular的十进制管道来显示从ngFor循环的索引生成的行号。我需要显示最长为4位的数字（无小数），但不希望在第3个和第4个前导零之间使用逗号分隔。可以通过Decimal管道进行配置，还是需要编写自定义管道？

    <div *ngFor="let line of message; let i = index">
      <pre>{{i + 1 | number:'3.0'}}&nbsp;{{line}}</pre>
    </div>

我希望该行显示为： 0001行文字在这里 0002其他行文字 0003事件更多文本

我得到： 0,001行文本在这里 0,002更多行文本 0,003事件更多文本

Answer 1

您可以为此创建另一个管道

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

@Pipe({
  name: 'noComma'
})
export class NoCommaPipe implements PipeTransform {

  transform(val: number): string {
    if (val != null) {
      // here we just remove the commas from value
      return val.toString().replace(/,/g, "");
    } else {
      return "";
    }
  }
}

 <pre>{{i + 1 | number:'3.0-0' | noComma }}&nbsp;{{line}}</pre>

另一种解决方案是使用自定义管道

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

@Pipe({
  name: 'lineNumber'
})
export class LineNumberPipe implements PipeTransform {

  transform(val: number, leadingZeros: number = 2): string {
    if (val != null) {

      return this.pad(val, leadingZeros);
    } else {
      return "";
    }
  }

  private pad(val: number, leadingZeros) {
    const s = val.toString();
    while (s.length < (leadingZeros || 2)) {s = '0' + s;}
    return s;
  }


}


<pre>{{i + 1 | lineNumber:'4' }}&nbsp;{{line}}</pre>

Angular的十进制管道可以显示4个没有逗号的整数吗？

1 个答案: