Question

我有一个可以是正值或负值的数字。我想总是把它打印成负片。有没有办法在Angular 2 html代码中格式化它？我知道如何在typescript / javascript中做到这一点。但是，想知道我是否可以直接格式化Angular HTML代码

Answer 1

获得数字否定的快速方法是：

-Math.abs(num);

Angular使用管道来转换模板中呈现的数据。创建自定义管道：

如果你使用angular-cli ng g pipe minus

@Pipe({name: 'minus'})

export class MinusPipe implements PipeTransform {
  transform(num: number, args?: any): any {
    return -Math.abs(num);
  }
}

在你的模板中：

{{ myNumber | minus }}

Answer 2

您需要使用管道。这是一个：

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

@Pipe({name: 'negativeNumber'})

export class NumberFormatPipe implements PipeTransform {
    transform(value: number): number { 
      return Math.abs(value)*(-1);
    }
}

在html中使用

<div>{{somevalue | negativeNumber}}</div>

Answer 3

老问题，但仍然是实际的。作为创建新管道的替代方法，您可以在模板中使全局对象（例如“ Math”）可用。

在控制器中定义以下内容：

public myMath = Math;

现在您可以在html模板中使用它：

{{myMath.abs(the_number)}}

Answer 4

就我而言，解决方案是在数字后面加上减号

{{ -num }}

但是如果有正数是个问题

{{ (num >= 0 ? num : -num) }}

用于格式化和打印数字的Angular HTML代码为正（无减号）

4 个答案: