Javascript 扩展指令以不显示两位小数
我已经写了一个指令,它接受数字,并且取决于它是10000还是10000000,它将返回10k、10M等。我网站中的一个屏幕需要以2位小数显示值,而另一个屏幕不需要。我当前的实现显示的数字最多为2位小数。我如何扩展它以在需要时不显示Javascript 扩展指令以不显示两位小数,javascript,angular,Javascript,Angular,我已经写了一个指令,它接受数字,并且取决于它是10000还是10000000,它将返回10k、10M等。我网站中的一个屏幕需要以2位小数显示值,而另一个屏幕不需要。我当前的实现显示的数字最多为2位小数。我如何扩展它以在需要时不显示 import { Component, OnInit, Pipe, PipeTransform } from '@angular/core'; @Pipe({ name: 'shortNumberFormat' }) export class ShortNumb
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;
}
}
}
从'@angular/core'导入{Component,OnInit,Pipe,PipeTransform};
@烟斗({
名称:“shortNumberFormat”
})
导出类ShortNumberFormatDirective实现PipeTransform{
构造函数(){}
变换(编号:任意){
if(number==null | | isNaN(number)){
返回;
}
常量hasMinus=字符串(数字)。字符(0)='-'?true:false;
数字=字符串(数字)。字符(0)=='-'?
+字符串(数字)。子字符串(1,数字。长度):数字;
如果(number=1000&&number=1000000&&number=100000000&&number您可以向管道添加一个参数booleanisRequired,以说明是否需要应用管道
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;
}
}
}
transform(数字:any,isRequired:boolean){
if(number==null | | isNaN(number)){
返回;
}
如果(需要)返回编号;
否则{
常量hasMinus=字符串(数字)。字符(0)='-'?true:false;
数字=字符串(数字)。字符(0)=='-'?
+字符串(数字)。子字符串(1,数字。长度):数字;
如果(编号=1000&&number=1000000&&number=100000000&&number,则:
pipe类实现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;
}
}
从'@angular/core'导入{Component,OnInit,Pipe,PipeTransform};
@烟斗({
名称:“shortNumberFormat”
})
导出类ShortNumberFormatDirective实现PipeTransform{
变换(数字:任意,小数=0){
if(number==null){
返回;
}
number=parseFloat(number);
如果(isNaN(编号)){
返回;
}
const signPrefix=number<0?'-':'';
数字=数学abs(数字);
如果(number=1000&&number=1000000&&number),我想你没有理解我的问题,或者我不是很清楚。在这两种情况下,我都需要显示管道。唯一的区别是,在一种情况下,它将显示两个小数位,而在另一种情况下,它不会显示“唯一的区别是,在一种情况下,它将显示小数点后2位,而在另一种情况下,它不会”基于什么?你所说的“不会”是什么意思“?你能给我们一个具体的例子说明你想要什么吗?你想让显示结果取决于屏幕大小吗?你想要实现什么真的不清楚!嗨,Nicky,我不明白你共享的链接与我的帖子有什么关系我得到了下面的错误我得到了下面的错误toFixed()digits参数必须介于0和100之间我这样调用它{{item.minSize | shortNumberFormat:item.minSize}}我想我调用的方式有点问题。在调试时,我可以看到eg 20000的值被传递到这两个参数。如果我尝试这个{item.minSize{124; shortNumberFormat:'item.minSize'}它可以工作,但是如果我尝试这个{{item.minSize | shortNumberFormat:'item.minSize':'2'}它不会工作。获取相同的错误toFixed()digits参数在Number.toFixed处必须介于0和100之间。decimals
的值是多少?