9

我正在学习 Angular2，我想格式化一个添加千位逗号分隔符的数字。据我所知，这可以使用 Pipes 完成，问题是我想在 js 文件中而不是在 html 中以编程方式格式化数字（像 var | number 一样）。

首先，我意识到没有可以使用的 NumberPipe 独立管道（如果我错了，请纠正我），最相似的管道是 @angular2/common 中的 CurrencyPipe。所以我有这样的事情：

import { Component } from '@angular/core';
import { CurrencyPipe } from '@angular/common';

@Component({
  templateUrl: 'test.component.html',
  styleUrls: ['./test.component.scss']
})
export class TestComponent {
    public myNumber = 1000;

    constructor(private currencyPipe: CurrencyPipe) {    
        var formatted = this.currencyPipe().transform(this.myNumber, 'MXN', true); // Is this correct?
    }

}

但它向我抛出了以下错误： 未处理的承诺拒绝：没有 CurrencyPipe 的提供者！; 区域：角;...

我究竟做错了什么？

提前致谢。

问候

4

2 回答 2

15

第一件事：您需要声明您的管道 - 将其添加到 NgModuledeclarations部分：

declarations: [CurrencyPipe]

第二件事：管道不是可注入的，因此您不能使用 Angular 依赖注入系统来获取它的实例。您需要手动创建此管道的新实例，例如：

var formatted = (new CurrencyPipe()).transform(this.myNumber, 'MXN', true);
于 2017-01-25T02:01:43.527 回答
1

这实际上适用于 @Injectable 显示实用程序服务，比之前涉及模块的答案更简单。我导入了我的数据模型（如下）和管道，然后简单地添加了函数。因此，如果您不能直接在标记中使用管道，请使用此技巧！

export interface MoneyDTO extends SerializableDTO, JsonModelObjectDTO {
  value?: string;
  currency?: string;
}

import { CurrencyPipe } from '@angular/common';

formatMoney(money: MoneyDTO): string {
  const cp: CurrencyPipe = new CurrencyPipe('en-US');

  return money && money.value ? cp.transform(money.value, money.currency || 'USD', 'symbol') : null;
}
于 2019-04-30T22:01:04.367 回答