
- Angular 2 教程
- Angular 2 - 首页
- Angular 2 - 概述
- Angular 2 - 环境
- Angular 2 - Hello World
- Angular 2 - 模块
- Angular 2 - 架构
- Angular 2 - 组件
- Angular 2 - 模板
- Angular 2 - 指令
- Angular 2 - 元数据
- Angular 2 - 数据绑定
- 使用 HTTP 进行 CRUD 操作
- Angular 2 - 错误处理
- Angular 2 - 路由
- Angular 2 - 导航
- Angular 2 - 表单
- Angular 2 - CLI
- Angular 2 - 依赖注入
- Angular 2 - 高级配置
- Angular 2 - 第三方控件
- Angular 2 - 数据显示
- Angular 2 - 处理事件
- Angular 2 - 数据转换
- Angular 2 - 自定义管道
- Angular 2 - 用户输入
- Angular 2 - 生命周期钩子
- Angular 2 - 嵌套容器
- Angular 2 - 服务
- Angular 2 有用资源
- Angular 2 - 问答
- Angular 2 - 快速指南
- Angular 2 - 有用资源
- Angular 2 - 讨论
Angular 2 - 数据转换
Angular 2 有许多过滤器和管道可用于转换数据。
小写
用于将输入转换为全小写。
语法
Propertyvalue | lowercase
参数
无
结果
属性值将转换为小写。
示例
首先确保以下代码存在于 app.component.ts 文件中。
import { Component } from '@angular/core'; @Component ({ selector: 'my-app', templateUrl: 'app/app.component.html' }) export class AppComponent { TutorialName: string = 'Angular JS2'; appList: string[] = ["Binding", "Display", "Services"]; }
接下来,确保以下代码存在于 app/app.component.html 文件中。
<div> The name of this Tutorial is {{TutorialName}}<br> The first Topic is {{appList[0] | lowercase}}<br> The second Topic is {{appList[1] | lowercase}}<br> The third Topic is {{appList[2]| lowercase}}<br> </div>
输出
保存所有代码更改并刷新浏览器后,您将获得以下输出。

大写
用于将输入转换为全大写。
语法
Propertyvalue | uppercase
参数
无。
结果
属性值将转换为大写。
示例
首先确保以下代码存在于 app.component.ts 文件中。
import { Component } from '@angular/core'; @Component ({ selector: 'my-app', templateUrl: 'app/app.component.html' }) export class AppComponent { TutorialName: string = 'Angular JS2'; appList: string[] = ["Binding", "Display", "Services"]; }
接下来,确保以下代码存在于 app/app.component.html 文件中。
<div> The name of this Tutorial is {{TutorialName}}<br> The first Topic is {{appList[0] | uppercase }}<br> The second Topic is {{appList[1] | uppercase }}<br> The third Topic is {{appList[2]| uppercase }}<br> </div>
输出
保存所有代码更改并刷新浏览器后,您将获得以下输出。

切片
用于从输入字符串中切出一段数据。
语法
Propertyvalue | slice:start:end
参数
开始 - 这是切片应开始的起始位置。
结束 - 这是切片应结束的起始位置。
结果
属性值将根据开始和结束位置进行切片。
示例
首先确保以下代码存在于 app.component.ts 文件中
import { Component } from '@angular/core'; @Component ({ selector: 'my-app', templateUrl: 'app/app.component.html' }) export class AppComponent { TutorialName: string = 'Angular JS2'; appList: string[] = ["Binding", "Display", "Services"]; }
接下来,确保以下代码存在于 app/app.component.html 文件中。
<div> The name of this Tutorial is {{TutorialName}}<br> The first Topic is {{appList[0] | slice:1:2}}<br> The second Topic is {{appList[1] | slice:1:3}}<br> The third Topic is {{appList[2]| slice:2:3}}<br> </div>
输出
保存所有代码更改并刷新浏览器后,您将获得以下输出。

日期
用于将输入字符串转换为日期格式。
语法
Propertyvalue | date:”dateformat”
参数
日期格式 - 这是输入字符串应转换为的日期格式。
结果
属性值将转换为日期格式。
示例
首先确保以下代码存在于 app.component.ts 文件中。
import { Component } from '@angular/core'; @Component ({ selector: 'my-app', templateUrl: 'app/app.component.html' }) export class AppComponent { newdate = new Date(2016, 3, 15); }
接下来,确保以下代码存在于 app/app.component.html 文件中。
<div> The date of this Tutorial is {{newdate | date:"MM/dd/yy"}}<br> </div>
输出
保存所有代码更改并刷新浏览器后,您将获得以下输出。

货币
用于将输入字符串转换为货币格式。
语法
Propertyvalue | currency
参数
无。
结果
属性值将转换为货币格式。
示例
首先确保以下代码存在于 app.component.ts 文件中。
import { Component } from '@angular/core'; @Component ({ selector: 'my-app', templateUrl: 'app/app.component.html' }) export class AppComponent { newValue: number = 123; }
接下来,确保以下代码存在于 app/app.component.html 文件中。
<div> The currency of this Tutorial is {{newValue | currency}}<br> </div>
输出
保存所有代码更改并刷新浏览器后,您将获得以下输出。

百分比
用于将输入字符串转换为百分比格式。
语法
Propertyvalue | percent
参数
无
结果
属性值将转换为百分比格式。
示例
首先确保以下代码存在于 app.component.ts 文件中。
import { Component } from '@angular/core'; @Component ({ selector: 'my-app', templateUrl: 'app/app.component.html' }) export class AppComponent { newValue: number = 30; }
接下来,确保以下代码存在于 app/app.component.html 文件中。
<div> The percentage is {{newValue | percent}}<br> </div>
输出
保存所有代码更改并刷新浏览器后,您将获得以下输出。

百分比管道还有另一种变体,如下所示。
语法
Propertyvalue | percent: ‘{minIntegerDigits}.{minFractionDigits}{maxFractionDigits}’
参数
最小整数位数 - 这是最小整数位数。
最小小数位数 - 这是最小小数位数。
最大小数位数 - 这是最大小数位数。
结果
属性值将转换为百分比格式
示例
首先确保以下代码存在于 app.component.ts 文件中。
import { Component } from '@angular/core'; @Component ({ selector: 'my-app', templateUrl: 'app/app.component.html' }) export class AppComponent { newValue: number = 0.3; }
接下来,确保以下代码存在于 app/app.component.html 文件中。
<div> The percentage is {{newValue | percent:'2.2-5'}}<br> </div>
输出
保存所有代码更改并刷新浏览器后,您将获得以下输出。
