我试图在我的角度4应用程序中显示数字格式。基本上我正在看的是,如果数字是12.23百万,那么它应该显示例如12.2M(小数点后一位)
如果数字是50,000.123那么50.1K
我如何在角度上实现这一点。我需要写一个指令吗?有角度的内置管道吗?
结构体
export interface NpvResults {
captiveInsYear: number[];
captiveInsPremiumPaid: number[];
captiveInsTaxDeduction: number[];
captiveInsLoanToParent: number[];
captiveInsCapitalContribution: number[];
captiveDividentDistribution: number[];
captiveInsTerminalValue: number[];
}
该数组初始化为以下值
this.sourceResults.captiveInsPremiumPaid = [1,2,3,4,5];
HTML
<td *ngFor= "let item of NpvResults.captiveInsPremiumPaid" >{{item}}</td>
你可以创建PIPE
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'thousandSuff'
})
export class ThousandSuffixesPipe implements PipeTransform {
transform(input: any, args?: any): any {
var exp, rounded,
suffixes = ['k', 'M', 'G', 'T', 'P', 'E'];
if (Number.isNaN(input)) {
return null;
}
if (input < 1000) {
return input;
}
exp = Math.floor(Math.log(input) / Math.log(1000));
return (input / Math.pow(1000, exp)).toFixed(args) + suffixes[exp - 1];
}
}
在视图中实现
{{ model | thousandSuff }} <!-- 0 decimals -->
{{ model | thousandSuff : 2 }} <!-- X decimals -->
结果
{{22600000 |千寿司}} - > 23M
{{22600000 |千寿:2}} - > 22.60M
在这里,我只是给你一个想法,先创建
HTML
{{number | shortNumber}}
您可以创建自己的custom pipe filter
,您可以在其中传递您的数字,然后,您可以执行如下代码,将此逻辑放在您的自定义管道中。
管道过滤器
getformat(){
if(number == 0) {
return 0;
}
else
{
// hundreds
if(number <= 999){
return number ;
}
// thousands
else if(number >= 1000 && number <= 999999){
return (number / 1000) + 'K';
}
// millions
else if(number >= 1000000 && number <= 999999999){
return (number / 1000000) + 'M';
}
// billions
else if(number >= 1000000000 && number <= 999999999999){
return (number / 1000000000) + 'B';
}
else
return number ;
}
}
你可以这样做。要创建自定义管道,你可以参考这个siteclick here
最简单的方法是制作管道和服务。您可以使用数字js库在服务中进行实际格式化,并在管道中导入该服务并在transform方法中应用格式。
import { Pipe, PipeTransform } from '@angular/core';
import { NumberFormatService } from '../utils/number-format.service';
@Pipe({
name: 'numberFormat'
})
export class NumberFormatPipe implements PipeTransform {
constructor(private nF: NumberFormatService) {}
transform(value: any, args?: any): any {
if(args == "commas"){
return this.nF.addCommas(value);
}
else if(args == "kmb"){
return this.nF.addKMB(value);
}
return value;
}
}
import { Injectable } from '@angular/core';
import * as numeral from 'numeral';
@Injectable({
providedIn: 'root'
})
export class NumberFormatService {
constructor() { }
public addCommas(val){
return numeral(val).format('0,0');
}
public addKMB(val){
return numeral(val).format('0[.]00a');
}
}
html template file
{{dailyData.avgDaily | numberFormat: 'commas'}}
{{dailyData.avgDaily | numberFormat: 'kmb'}}