在Angularjs2

时间:2016-10-24 07:52:51

标签: angular

enter image description here出于某些显示目的,我需要将数字的数字部分和小数部分分开。虽然我没有在这个问题的标题中提到我需要一个逗号而不是小数点和显示数千,而不是逗号空格。

实际上我要做的是在数字部分上方显示小数部分,数字部分以逗号而不是点结尾。我也附上了一张照片。这是一个Angularjs2应用程序。

我现在使用数字管的方式 {{trn.Amount | number:'2.2-2'}}

但是这给出了类似这样的东西:02.55

我认为我必须使用数字管道两次才能完成此任务。但未能正确实施。所有帮助赞赏。谢谢!

1 个答案:

答案 0 :(得分:1)

使用数字管道两次将无效,因为您无法在分隔符之前设置类似设置最大整数位数的内容。

数字管道的参数为:{minIntegerDigits}.{minFractionDigits}-{maxFractionDigits} 见:What are the parameters for the number Pipe - Angular 2

您可以使用自定义管道或组件。您可以在模块中包含一个示例组件:

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

@Component({
    selector: "mynum",
    template: "<span class='myInt'>{{num | number:'1.0-0'}}</span>,<span class='myDec'>{{dec}}</span>",
})
export class MYNUM_DIRECTIVES implements OnInit {
    @Input() public num: number;
    public dec:number;

    ngOnInit() { 
        this.dec = parseInt(Math.round(this.num * 100).toString().substr(-2));
    }
}

并在您的模板中使用它,如:

<mynum num="123.45678"></mynum> <!-- output: 123,46 -->