如何初始化角度管道(CurrencyPipe)



阅读官方文档时,我对如何在Angular中初始化管道感到困惑。

当我读到文件上写着时

{{ value_expression | currency [ : currencyCode [ : display [ : digitsInfo [ : locale ] ] ] ] }}

我认为这是因为我应该能够让以下工作

// component.ts
import { CurrencyPipe } from '@angular/common'; 
// component.html
<div>{{ myNumber | CurrencyPipe [ : "USD" [ : "symbol" [ : "0.0-0" ] ] ] }}</div>

但显然这不起作用。

有两个见解可以完全回答我的问题:1(解释doc符号试图表达的内容,以及2(如何实现我想要的管道


这是一个可重复性最小的例子(mre(。我在一个更大的项目中工作,所以如果需要更多的信息,请告诉我。

// mre.component.ts
import { CurrencyPipe } from '@angular/common'; 
import { Component } from '@angular/core';
@Component({
selector: 'mre',
templateUrl: './mre.component.html',
styleUrls: ['./mre.component.css'] // This is a blank file
});
export class MreComponent {
constructor() {
console.log(CurrencyPipe); // This line is only here so typescript won't be angry
};
public myNumber: number = 1234.56;
}
// mre.component.html
<div>
<p>{{ myNumber | currency }}</p>
</div>

如果我在mre.module.ts中包含BrowserModule,那么在运行时会得到以下错误。Error: BrowserModule has already been loaded.


我删除了Browser Module(保持原样(,现在它可以工作了。很明显,我在两步之间换了一些东西,但我不知道是什么。谢谢你的帮助。很抱歉,在我最初给出的例子之外,我没有对我尝试过的案例进行足够的描述。

您不需要初始化货币管道,它内置在Angular中。您只需要确保您的模块文件正在导入CommonModule。在你的例子中,你的语法有点错误。为了确保你正确地导入了管道,试试这个,

<div>{{ myNumber | currency }}</div>

这将使用具有所有默认格式的货币管道。然后,一旦你完成了这项工作,你就可以开始添加一些格式化参数,

<div>{{ myNumber | currency:'USD':'code':'.2-2' }}</div>

您可以为每个格式化选项提供的不同值可以在这里找到

相关内容

  • 没有找到相关文章

最新更新