如何在角4中使用一些资源创建自定义管道以格式化编号(accounting.js)

Question

这就是问题所在(我的背景是rails，我还在学习角4)

我有会计javascript文件(.js) (accounting.js)，它有函数.js，我想在angular中使用它。我做了一些搜索，我找到了这个js的npmjs包，并安装了npm安装会计-js，我还找到了accounting.d.ts。现在的问题是，考虑上面的资源如何创建自定义管道来使用这个函数。

在这里，我想要实现的结果，使用我的html视图中的函数(例如，我有提案-list.Component.html)和我想要的{{ 123456.78 x formatNumber }将打印到屏幕123,456.78。

我确实发布了一个以前的问题，有人给了我一个关于定制管的提示，我做了直接使用js的测试，但仍然没有结果(参见下面的代码)

proposal-list.component.ts

import { Component, OnInit } from '@angular/core';
import { formatNumber } from 'accounting-js/lib/formatNumber.js';
@Component({
  selector: 'app-proposal-list',
  templateUrl: './proposal-list.component.html',
  styleUrls: ['./proposal-list.component.css']
})
export class ProposalListComponent implements OnInit {
  totalMoney: number = 0;
  constructor() { }
  ngOnInit() {
    this.totalMoney = formatNumber(123456.78)
  }
}

proposal-list.component.html

<p>test = {{ totalMoney }}</p>

它显示的是没有价值的标签测试，

Answer 1

我面临着一个类似的按照文化进行数字转换的问题，所以我用ECMAScript Intl API编写了一个自定义管道。

代码基本上是这样的：

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

  @Pipe({
  name: 'numberLocale'
})
export class NumberLocalePipe implements PipeTransform {

  transform(value: any, selectedCulture: any): any {

    if (!value) {
      return;
    }
    var userLang = navigator.language;
    if (selectedCulture) {
      return new Intl.NumberFormat(selectedCulture).format(value);
    } else {
      return new Intl.NumberFormat(userLang).format(value);
    }

  }

}

在这里，我使用的是Intl.NumberFormat of ECMAScript，您可以使用您的account.js，没有太大的更改。

在我为您创建的这个工作普朗克尔中可以看到整个代码。

希望这能帮到你。

Answer 2

首先使用角-cli命令：ng g pipe format-number生成新管道，然后：

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

@Pipe({name: 'formatNumber'})
export class FormatNumberPipe implements PipeTransform {
  transform(value: number): number {
    // there You should write your formula for transforming numbers into string like: 123456.78 into 123,456.78
  }
}

Answer 3

有一个默认的货币管道为您提供此功能。

https://angular.io/api/common/CurrencyPipe

如果您不想使用它，那么使用javascript

<p>test = {{ totalMoney.toLocaleString() }}</p>

对象/数字/toLocaleString