Angular 13：十进制及数字四舍五入实例

迪鲁宾
804 阅读4分钟

Angular Decimal pipe Example

这是一个关于角管小数例子的简短教程：

  • 限制数字为2位小数
  • 如何在Angular中显示带小数的数字。

Angular十进制管道

pipe是一个函数，它接受输入，转换数据并输出为不同的格式。Angular DecimalPipe将数字格式化为带有小数点和本地化字符串规则的字符串。

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

它用于使用本地化将数字转换和格式化为十进制字符串。它接受参数。以下是HTML模板中的语法

{{ expression | number [ : digitsInfo [ : locale ] ] }}

参数表达式：是一个数字值或要格式化的表达式数字：是一个包含数字对象格式规则的对象本地：默认的本地是en_US，可以用本地字符串定制，以按照本地化的形式规则进行格式化。digitsInfo ：代表十进制格式

{minIntegerDigits}.{minFractionDigits}-{maxFractionDigits}
  • minIntegerDigits: 分数(.)前的最小位数
  • minFractionDigits:小数点后的最小数位。
  • maxFractionDigits:分数后的最大小数位数。

让我们在Angular中创建一个新的组件，用于测试Angular中的小数管。

A:\work\angular-pipe-examples>ng g component decimal-pipe-example
CREATE src/app/decimal-pipe-example/decimal-pipe-example.component.html (35 bytes)
CREATE src/app/decimal-pipe-example/decimal-pipe-example.component.spec.ts (712 bytes)
CREATE src/app/decimal-pipe-example/decimal-pipe-example.component.ts (330 bytes)
CREATE src/app/decimal-pipe-example/decimal-pipe-example.component.scss (0 bytes)
UPDATE src/app/app.module.ts (1085 bytes)

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

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

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

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

  constructor() { }
  value: number = 35.8796;

  ngOnInit(): void {
  }

}

看到声明的各种选项

Angular Decimal Pipe Example

{{value | number}}

输出

Angular Decimal Pipe Example

35.88

如何在Angular中对一个数字进行格式化和四舍五入？

假设你有一个数字

  • 20到20.00元

  • 10.111到$10.11

  • 小数管的格式

数字格式为4位小数，并使用了number:'2.1-4'格式。

其中允许

  • 2是最小的数字数
  • 1是最小的几位数
  • 4是最大的数字分数

在typecript中声明数字类型的变量

  value: number = 35.879612312;
  value1: number = 5.1231345;
  value2: number = 5.8;

在HTML模板中使用了小数管变量

让我们在Angular HTML组件中把数字格式化为最大4位小数。

Angular Decimal Pipe Example

    {{value | number:'2.1-4'}}
{{value1 | number:'2.1-4'}}
{{value2 | number:'2.1-4'}}

输出

Angular Decimal Pipe Example

135.8796
05.1231
05.8

以上是在HTML模板组件中使用的decimalpipe。我们如何在Typescript组件中使用decimalpipe？

在typescript组件中用十进制管来取整数？

providers 首先，请在你的app.module.ts的DecimalPipe 。

@NgModule({
  providers: [DecimalPipe],
})

在typescript组件中

  • 请将decimalpipe导入angular组件中
  • 在构造函数中用变量配置这个管道，它就可以在各个组件中使用了。
  • 编写roundNumber()，使用decimalpipe变量转换为允许2个小数的格式规则(1.2-2)
import { Component, OnInit } from '@angular/core';
import { DecimalPipe } from '@angular/common';

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

  constructor(private decimalPipe: DecimalPipe) { }
  value: number = 135.879612312;
  value1: number = 5.1231345;
  value2: number = 5.8;

  ngOnInit(): void {
  }
  roundNumber(num: number): string | null {
    return this.decimalPipe.transform(num, "1.2-2") ?? '0';
  }

}

在html组件中，使用模板语法调用方法({{}})


    {{roundNumber(123)}}

十进制管道在Angular中不工作

当你使用十进制管道时，你会遇到以下错误

  • Unhandled Promise rejection:模板解析错误 找不到管道'number'。
  • 十进制管道在Angular中不工作
  • 在Angular中找不到管道

CommonModule 原因是十进制管道是一个来自@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 typescript组件中调用十进制管道，**EXCEPTION: Uncaught (in promise):错误。没有DecimalPipe的提供者!**为了使decimalpipe ，在Angular typescript组件中工作，在app.module.ts中把DecimalPipe添加到提供者部分。

@NgModule({
  providers: [DecimalPipe],
})

下面是一个app.module.ts的配置

import { CommonModule, DecimalPipe } from '@angular/common';
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';

@NgModule({
  declarations: [
    AppComponent,

  ],
  imports: [
    CommonModule,
    BrowserModule,
    AppRoutingModule
  ],
  providers: [AppComponent, DecimalPipe],
  bootstrap: [AppComponent]
})
export class AppModule { }

结语

综上所述，了解了什么是十进制管道和Angular中的语法，并以本地化的字符串格式显示格式化的十进制数字。

它还包括如何在Angular typescript和HTML模板组件中使用十进制管道。

avatar
文章
阅读
粉丝