将指令扩展为不显示小数点后两位
将指令扩展为不显示小数点后两位
提问于 2018-02-19 11:44:11
我已经写了一个指令，它接受数字，并且取决于它是10,000还是10,000,000，它将返回10k，10,000等等。我的网站中的一个屏幕需要将值显示在小数的2位中，而另一个屏幕则不显示。我目前的实现显示了2位小数点以下的数字。如果需要，如何将其扩展到不显示？
import { Component, OnInit, Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'shortNumberFormat'
})
export class ShortNumberFormatDirective implements PipeTransform {
constructor() { }
transform(number: any) {
if (number == null || isNaN(number)) {
return;
}
const hasMinus = String(number).charAt(0) === '-' ? true : false;
number = String(number).charAt(0) === '-' ?
+ String(number).substring(1, number.length) : number;
if (number <= 999) { // hundreds
number = number.toFixed(2) ;
} else if (number >= 1000 && number <= 999999) { // thousands
number = (number / 1000).toFixed(2) + 'K';
} else if (number >= 1000000 && number <= 999999999) { // millions
number = (number / 1000000).toFixed(2) + 'M';
} else if (number >= 1000000000 && number <= 999999999999) { // billions
number = (number / 1000000000).toFixed(2) + 'B';
}
if (hasMinus) {
return '-' + number;
} else {
return number;
}
}
}回答 2
Stack Overflow用户
回答已采纳
发布于 2018-02-21 23:05:26
根据文档
管道类实现了PipeTransform接口的转换方法，该方法接受输入值，然后是可选参数，并返回转换后的值。
这允许您设置默认的零小数在大多数情况下，但也可以选择传递一个2，以获得两位小数点。
import {Component, OnInit, Pipe, PipeTransform} from '@angular/core';
@Pipe({
name: 'shortNumberFormat'
})
export class ShortNumberFormatDirective implements PipeTransform {
transform(number: any, decimals = 0) {
if (number == null) {
return;
}
number = parseFloat(number);
if (isNaN(number)) {
return;
}
const signPrefix = number < 0 ? '-' : '';
number = Math.abs(number);
if (number <= 999) { // hundreds
number = number.toFixed(decimals);
} else if (number >= 1000 && number <= 999999) { // thousands
number = (number / 1000).toFixed(decimals) + 'K';
} else if (number >= 1000000 && number <= 999999999) { // millions
number = (number / 1000000).toFixed(decimals) + 'M';
} else { // billions
number = (number / 1000000000).toFixed(decimals) + 'B';
}
return signPrefix + number;
}
}Stack Overflow用户
发布于 2018-02-21 22:52:52
您可以向管道中添加一个参数boolean isRequired，以判断是否需要应用管道。
transform(number: any, isRequired: boolean) {
if (number == null || isNaN(number)) {
return;
}
if (isRequired) return number;
else {
const hasMinus = String(number).charAt(0) === '-' ? true : false;
number = String(number).charAt(0) === '-' ?
+ String(number).substring(1, number.length) : number;
if (number <= 999) { // hundreds
number = number.toFixed(2) ;
} else if (number >= 1000 && number <= 999999) { // thousands
number = (number / 1000).toFixed(2) + 'K';
} else if (number >= 1000000 && number <= 999999999) { // millions
number = (number / 1000000).toFixed(2) + 'M';
} else if (number >= 1000000000 && number <= 999999999999) { // billions
number = (number / 1000000000).toFixed(2) + 'B';
}
if (hasMinus) {
return '-' + number;
} else {
return number;
}
}
}然后，当您希望管道不改变格式时，只需添加一个参数：{{ 1000000 | shortNumberFormat:true }}
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/48865493
复制相关文章
相似问题
腾讯云开发者
