Angular 10 formatPercent() 方法
在本文中,我们将了解 Angular 10 中的 formatPercent 是什么以及如何使用它。 formatPercent用于根据语言环境规则将数字格式化为百分比。
句法:
formatPercent(value, locale, digitsInfo)
参数:
- value:要格式化的数字。
- locale:区域设置格式的区域设置代码。
- digitsInfo:十进制表示选项。
返回值:
- 字符串:格式化的百分比字符串。
NgModule:formatPercent使用的模块是:
- 通用模块
方法:
- 创建要使用的 Angular 应用程序。
- 在 app.module.ts 中导入 LOCALE_ID,因为我们需要导入语言环境以使用 get formatPercent。
import { LOCALE_ID, NgModule } from '@angular/core';
- 在 app.component.ts 中导入 formatPercent Zand LOCALE_ID
- 注入 LOCALE_ID 作为公共变量。
- 在 app.component.html 中使用字符串插值显示局部变量
- 使用 ng serve 为 Angular 应用程序提供服务以查看输出。
示例 1:
app.component.ts
import {
formatPercent
}
from '@angular/common';
import {Component,
Inject,
LOCALE_ID }
from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html'
})
export class AppComponent {
curr = formatPercent(31,this.locale,
'3.0-4');
constructor(
@Inject(LOCALE_ID) public locale: string,){}
}
app.component.html
GeeksforGeeks
Locale Percent is : {{curr}}
app.component.ts
import {
formatPercent
}
from '@angular/common';
import {Component,
Inject,
LOCALE_ID }
from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html'
})
export class AppComponent {
curr = formatPercent(31,this.locale,
'3.2-4');
constructor(
@Inject(LOCALE_ID) public locale: string,){}
}
app.component.html
GeeksforGeeks
Locale Percent is : {{curr}}
app.component.ts
import {
formatPercent
}
from '@angular/common';
import {Component,
Inject,
LOCALE_ID }
from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html'
})
export class AppComponent {
curr = formatPercent(31.21,this.locale,
'3.0-4');
constructor(
@Inject(LOCALE_ID) public locale: string,){}
}
app.component.html
GeeksforGeeks
Locale Percent is : {{curr}}
app.component.html
GeeksforGeeks
Locale Percent is : {{curr}}
输出:
示例 2:
app.component.ts
import {
formatPercent
}
from '@angular/common';
import {Component,
Inject,
LOCALE_ID }
from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html'
})
export class AppComponent {
curr = formatPercent(31,this.locale,
'3.2-4');
constructor(
@Inject(LOCALE_ID) public locale: string,){}
}
app.component.html
GeeksforGeeks
Locale Percent is : {{curr}}
输出:
示例 3:
app.component.ts
import {
formatPercent
}
from '@angular/common';
import {Component,
Inject,
LOCALE_ID }
from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html'
})
export class AppComponent {
curr = formatPercent(31.21,this.locale,
'3.0-4');
constructor(
@Inject(LOCALE_ID) public locale: string,){}
}
app.component.html
GeeksforGeeks
Locale Percent is : {{curr}}
输出:
参考: https ://angular.io/api/common/formatPercent