Angular 13 Pipe Currency examples | 格式化货币数字价格实例这是一个关于angular

Angular Currency pipe Example

这是一个关于angular管道货币实例的简短教程:

将长数字格式化为货币
如何在Angular中向右显示货币符号

Angular货币管道

Angular有一个内置的管道，叫做CurrencyPipe ，来自@angular/common模块。

这用于使用本地化将数字转换和格式化为货币字符串。以下是HTML模板中的语法

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

expression：是一个数字值或表达式，用于格式化货币。它是一个包含货币对象格式规则的对象currencyCode 。货币的短代码，默认的货币代码是USD（美元）display ：它是一个字符串或布尔值digitsInfo ：代表十进制格式

{minIntegerDigits}.{minFractionDigits}-{maxFractionDigits}

Angular货币管道实例

让我们在Angular中创建一个新的组件来测试Angular中的货币管道。

A:\work\angular-pipe-examples>ng g component currency-pipe-example
CREATE src/app/currency-pipe-example/currency-pipe-example.component.html (36 bytes)
CREATE src/app/currency-pipe-example/currency-pipe-example.component.spec.ts (719 bytes)
CREATE src/app/currency-pipe-example/currency-pipe-example.component.ts (334 bytes)
CREATE src/app/currency-pipe-example/currency-pipe-example.component.scss (0 bytes)
UPDATE src/app/app.module.ts (951 bytes)

这将在src/currency-pipe-example 文件夹中创建一个Angular组件。

在这个例子中，使用了Angular代码中货币管道的各种格式选项这里是一个包含数字的组件。

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-currency-pipe-example',
  templateUrl: './currency-pipe-example.component.html',
  styleUrls: ['./currency-pipe-example.component.scss']
})
export class CurrencyPipeExampleComponent {

  constructor() { }
  price = 123145;


}

看到声明的各种选项

Angular Currency Pipe Example

Price: {{price | currency}}

Price: {{price | currency}}

Price: {{price| currency:'EUR'}}

Price: {{price | currency:'EUR':'code'}}

Price: {{price | currency:'EUR':'symbol':'4.2-2'}}

Price: {{price | currency:'EUR':'symbol-narrow':'4.2-2'}}

Price: {{price | currency:'EUR':'symbol':'4.2-2':'en'}}

Price: {{price | currency:'EUR'}}

输出

Price: $123,145.00
Price: $123,145.00
Price: €123,145.00
Price: EUR123,145.00
Price: €123,145.00
Price: €123,145.00
Price: €123,145.00
Price: €123,145.00

如何将一个数字显示为两位小数的四舍五入的货币？

假设你有一个数字

20到$20.00
10.111到10.11美元

让我们创建一个angular typescript组件。创建并初始化一个带有数据的雇员数组。

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-currency-pipe-example',
  templateUrl: './currency-pipe-example.component.html',
  styleUrls: ['./currency-pipe-example.component.scss']
})
export class CurrencyPipeExampleComponent  {

  constructor() { }
  price = 20;


}

让我们在Angular HTML组件中把数字格式化为带有2位小数的USE货币。

Angular Currency Pipe Example

{{price | currency:'USD':true:'1.2-2'}}
{{price1 | currency:'USD':true:'1.2-2'}}

输出

$20.00
$10.11

currency:USD 告诉打印USED符号到数字上true: 货币符号是否显示1.2-2 ，第一个数字是最小的整数位数(默认=1) 即. 符号之前的数字，第二个数字(2,默认为0) 代表显示的小数，即. 符号之后的小数，第三个数字是允许的最大小数(默认为3)

货币管道在Angular中不工作

当你使用货币管道时，你会遇到以下错误。

未处理的承诺被拒绝。Template parse errors The pipe 'currency' could not be found
货币管道在Angular中不工作
在Angular中找不到管道

CommonModule 原因是currency管道是一个来自@angular/common 模块的管道。

你必须在应用模块中导入CommonModule ，即app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import {
  BrowserAnimationsModule
} from '@angular/platform-browser/animations';

import { AppComponent } from './app.component';
import { CommonModule } from '@angular/common';

@NgModule({
  imports: [
    BrowserModule,
    FormsModule,
    CommonModule,
    BrowserAnimationsModule
  ],
  declarations: [AppComponent],
  bootstrap: [AppComponent]
})
export class AppModule {}

结语

综上所述，了解了什么是Angular中的currency pipe和语法，以及显示格式化的货币数字。