📜  Angular 10 DemicalPipe API

📅  最后修改于: 2022-05-13 01:56:47.210000             🧑  作者: Mango

Angular 10 DemicalPipe API

在本文中,我们将了解 Angular 10 中的DemicalPipe是什么以及如何使用它。 DemicalPipe 用于根据数字选项和区域设置规则格式化值。

句法:

{{ value | number}}

NgModule: DecimalPipe 使用的模块是:

  • 通用模块

方法:

  • 创建一个要使用的 Angular 应用程序。
  • 使用 DecimalPipe 不需要任何导入。
  • 在 app.component.ts 中定义采用十进制值的变量。
  • 在 app.component.html 中使用上述语法来制作日期元素。
  • 使用 ng serve 为 Angular 应用程序提供服务以查看输出。

参数:

  • Value:取一个字符串值,根据使用十进制管道的条件转换为十进制。

示例 1:

app.component.ts
import { Component, OnInit } from '@angular/core';
  
@Component({
    selector: 'app-root',
    templateUrl: './app.component.html'
})
export class AppComponent {
    pi: number = 2.33;
}


app.component.html

    Number:     {{pi | number}}

    

         Number with 4 digits:     {{pi | number:'4.1-5'}}



app.component.ts
import { Component, LOCALE_ID } from '@angular/core';
  
@Component({
    selector: 'app-root',
    templateUrl: './app.component.html'
})
export class AppComponent {
    num: number = 20*4;
}


app.component.html

    Number:     {{num | number}}

  

         Number with 3 digits:     {{num | number:'3.2'}}



app.component.html

    Number:     {{pi | number}}

    

         Number with 4 digits:     {{pi | number:'4.1-5'}}

输出:

示例 2:

app.component.ts

import { Component, LOCALE_ID } from '@angular/core';
  
@Component({
    selector: 'app-root',
    templateUrl: './app.component.html'
})
export class AppComponent {
    num: number = 20*4;
}

app.component.html

    Number:     {{num | number}}

  

         Number with 3 digits:     {{num | number:'3.2'}}

输出:

参考: https://angular.io/api/common/DecimalPipe