Angular 2 内置管道
示例
Angular2带有一些内置管道：
| 管 | 用法 | 例 |
|---|---|---|
| DatePipe | date | {{ dateObj | date }} // output is 'Jun 15, 2015' |
| UpperCasePipe | uppercase | {{ value | uppercase }} // output is 'SOMETEXT' |
| LowerCasePipe | lowercase | {{ value | lowercase }} // output is 'sometext' |
| CurrencyPipe | currency | {{ 31.00 | currency:'USD':true }} // output is '$31' |
| PercentPipe | percent | {{ 0.03 | percent }} //output is %3 |
还有其他 在这里查看其文档。
示例
hotel-reservation.component.ts
import { Component } from '@angular/core';
@Component({
moduleId: module.id,
selector: 'hotel-reservation',
templateUrl: './hotel-reservation.template.html'
})
export class HotelReservationComponent {
public fName: string = 'Joe';
public lName: string = 'SCHMO';
public reservationMade: string = '2016-06-22T07:18-08:00'
public reservationFor: string = '2025-11-14';
public cost: number = 99.99;
}
hotel-reservation.template.html
<div>
<h1>Welcome back {{fName | uppercase}} {{lName | lowercase}}</h1>
<p>
On {reservationMade | date} at {reservationMade | date:'shortTime'} you
reserved room 205 for {reservationDate | date} for a total cost of
{cost | currency}.
</p>
</div>输出结果
Welcome back JOE schmo On Jun 26, 2016 at 7:18 you reserved room 205 for Nov 14, 2025 for a total cost of $99.99.
-
本文向大家介绍Angular2内置指令NgFor和NgIf详解，包括了Angular2内置指令NgFor和NgIf详解的使用技巧和注意事项，需要的朋友参考一下 在这一章节中,我们来学习如何使用Angular2来展示数据,以及如何使用它的内置指令NgFor和NgIf 首先要确保你有一个可以运行起来的Angular2的样例程序,最好就是我们上一章节中完成的那个QuickStart小项目或者你自己根据官
-
错误： 棱角版本：
-
即。在货币管道上完成一些额外的格式化。为此，我想在自定义管道的组件代码中使用现有管道。
-
我有一个NgSwitch模板。在NgSwitch中，我想获取初始化模板的模板引用。大致如下： 当单击组件中的按钮时，我想调用初始化组件（第一个/第二个/第三个）到一个方法（在所有这些 3 个组件实现的接口上定义）。问题是视图子项未定义。如果我#ref移动到容器 div，如下所示： ViewChild（模板引用）已初始化，但我可以调用组件的方法。 如何同时使用NgSwitch指令和模板引用变量？或者
-
本文向大家介绍Angular2 环境配置详细介绍，包括了Angular2 环境配置详细介绍的使用技巧和注意事项，需要的朋友参考一下 看到angular发布正式版，心动不已准备测试下。 看着官网教程，使用了cli创建项目，在命令行中键入： 安装cli npm install -g angular-cli 如果安装过以前的版本，请执行以下命令，进行更新： npm uninstall -g angula
-
问题内容： 我正在使用angular2和gulp开发一个节点应用程序。我编写了一个组件文件login.ts，如下所示： 我的bootstrap.ts文件是： 但是当我编译这些文件时，出现以下错误： 这是我的tsconfig.json： 我已经使用以下命令安装了angular2的类型： 请帮助纠正错误。 问题答案： @simon错误说的是输入错误。但是对于其他进口商品，我已经发布了此答案，可能对其他