使用管道的Angular Typescript示例。

math.pipe.ts

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

@Pipe({
  name: 'math',
})

export class MathPipe implements PipeTransform {

  transform(value: number, args: any = null):any {
      if(value) {
        return Math[args](value);
      }
      return 0;
  }
}

添加到@NgModule声明中

@NgModule({
  declarations: [
    MathPipe,

然后在模板中像这样使用:

{{(100*count/total) | math:'round'}}

使用管道的Angular Typescript示例。

math.pipe.ts

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

@Pipe({
  name: 'math',
})

export class MathPipe implements PipeTransform {

  transform(value: number, args: any = null):any {
      if(value) {
        return Math[args](value);
      }
      return 0;
  }
}

添加到@NgModule声明中

@NgModule({
  declarations: [
    MathPipe,

然后在模板中像这样使用:

{{(100*count/total) | math:'round'}}

这看起来不像是一种非常Angular的方式。我不完全确定为什么它不起作用，但您可能需要访问作用域才能使用这样的函数。

我的建议是创建一个过滤器。这就是Angular的方式。

myModule.filter('ceil', function() {
    return function(input) {
        return Math.ceil(input);
    };
});

然后在你的HTML中这样做:

<p>The percentage is {{ (100*count/total) | ceil }}%</p>

更好的选择是使用:

{{(100*score/questionCounter) || 0 | number:0}}

在值未初始化的情况下，它将方程的默认值设置为0。

如果你想在Angular中做一个简单的循环，你可以很容易地在表达式中设置过滤器。例如:

{{val | number:0}}

有关其他数字过滤器选项，请参阅这个CodePen示例&。

关于使用数字过滤器的Angular文档

使用Angular进行简单计算的最简单方法是根据需要直接在HTML标记中进行单个绑定，假设你不需要在页面上进行大量计算。这里有一个例子:

{{(data.input/data.input2)| number}} 

在本例中，您只需在()中进行数学运算，然后使用筛选器|来获得数字答案。这里有更多关于将Angular数字格式化为文本的信息:

https://docs.angularjs.org/api/ng/filter