Số tròn trong góc html

Một đường ống là một chức năng nhận đầu vào và chuyển đổi dữ liệu và đầu ra sang một định dạng khác. Góc DecimalPipe định dạng số thành chuỗi có dấu thập phân và quy tắc chuỗi được bản địa hóa

Angular có một đường ống sẵn có tên là

{minIntegerDigits}.{minFractionDigits}-{maxFractionDigits}

5 từ mô-đun @angular/common

Điều này được sử dụng để chuyển đổi và định dạng số thành chuỗi thập phân bằng cách sử dụng nội địa hóa. Nó chấp nhận các thông số. Đây là cú pháp trong mẫu HTML

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

Biểu thức tham số. là một giá trị số hoặc biểu thức để định dạng số. Nó là một đối tượng chứa các quy tắc định dạng đối tượng số Ngôn ngữ. cục bộ mặc định là en_US có thể được tùy chỉnh bằng chuỗi cục bộ để định dạng theo quy tắc biểu mẫu được bản địa hóa.

{minIntegerDigits}.{minFractionDigits}-{maxFractionDigits}

6. Thể hiện định dạng thập phân

{minIntegerDigits}.{minFractionDigits}-{maxFractionDigits}

• {minIntegerDigits}.{minFractionDigits}-{maxFractionDigits}
  

  7. số chữ số nhỏ nhất trước phân số[. ]

• {minIntegerDigits}.{minFractionDigits}-{maxFractionDigits}
  

  8. Chữ số thập phân nhỏ nhất sau phân số

• {minIntegerDigits}.{minFractionDigits}-{maxFractionDigits}
  

  9. Chữ số thập phân tối đa sau phân số

Ví dụ về ống thập phân góc

Hãy tạo một thành phần mới trong Angular để thử nghiệm đường ống thập phân trong 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]

Điều này tạo ra một thành phần góc cạnh trong thư mục

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]

0

Trong ví dụ này, đã sử dụng các tùy chọn định dạng khác nhau của ống thập phân trong mã Góc Đây là một thành phần có chứa một số

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 {
  }

}

Xem các tùy chọn khác nhau được khai báo

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

0

đầu ra

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

1

cách định dạng và làm tròn số trong Angular?

Giả sử bạn có một số

• 20 đến 20. 00

• 10. 111 đến 10 đô la. 11

• ống thập phân với định dạng

định dạng số thành 4 số thập phân và số đã sử dụng. ‘2. định dạng 1-4’

cho phép

• 2 số lượng chữ số tối thiểu
• 1 là phân số nhỏ nhất của các chữ số
• 4 là phân số lớn nhất của các chữ số

một biến kiểu số được khai báo trong bản thảo

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

2

đã sử dụng ống thập phân để biến trong mẫu HTML

Hãy định dạng số thành tối đa 4 chữ số thập phân trong thành phần HTML góc

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

3

đầu ra

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

4

Trên hết, decimalpipe được sử dụng trong thành phần mẫu HTML. Làm cách nào để chúng tôi sử dụng số thập phân trong thành phần Bản mô tả?

Ống thập phân để làm tròn số trong thành phần bản thảo?

Trước tiên, vui lòng thêm

{minIntegerDigits}.{minFractionDigits}-{maxFractionDigits}

5 vào ứng dụng

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]

2 của bạn. mô-đun. ts

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

7

Trong thành phần bản thảo,

• vui lòng nhập số thập phân vào một thành phần góc cạnh
• định cấu hình đường ống này trong hàm tạo bằng một biến và nó có sẵn để sử dụng trên các thành phần
• đã viết roundNumber[] sử dụng biến số thập phân để chuyển đổi thành cho phép 2 phân số thập phân với quy tắc định dạng [_______73]

{minIntegerDigits}.{minFractionDigits}-{maxFractionDigits}

0

Trong thành phần HTML, Gọi phương thức bằng cú pháp mẫu [{{}}]

{minIntegerDigits}.{minFractionDigits}-{maxFractionDigits}

1

ống thập phân không hoạt động trong Angular

Khi bạn đang sử dụng một đường ống thập phân, Bạn đã từng gặp phải các lỗi sau

• Từ chối lời hứa chưa được xử lý. Lỗi phân tích mẫu Không thể tìm thấy 'số' ống
• ống thập phân không hoạt động trong Angular
• không tìm thấy đường ống trong Angular

Lý do là đường ống thập phân là một đường ống từ mô-đun

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]

4 của mô-đun

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]

5

Bạn phải nhập

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]

4 trong mô-đun ứng dụng i. e

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]

7

{minIntegerDigits}.{minFractionDigits}-{maxFractionDigits}

2

Hãy xem một lỗi khác do gọi đường ống thập phân trong thành phần bản thảo góc NGOẠI TRỪ. Uncaught [trong lời hứa]. Lỗi. Không có nhà cung cấp cho DecimalPipe. Để làm cho

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]

8 hoạt động trong thành phần bản thảo góc, hãy thêm DecimalPipe vào phần nhà cung cấp trong ứng dụng. mô-đun. ts

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

7

Đây là một ứng dụng. mô-đun. cấu hình ts

{minIntegerDigits}.{minFractionDigits}-{maxFractionDigits}

4

Phần kết luận

Tóm lại, Đã học một ống thập phân có cú pháp trong Angular là gì và hiển thị số thập phân được định dạng với định dạng chuỗi được bản địa hóa

Làm thế nào để làm tròn số theo góc?

Làm thế nào để làm tròn đến 2 chữ số thập phân trong góc?

Hàm round[] là gì?

Làm cách nào để làm tròn đến 2 chữ số thập phân trong JavaScript?