Angular Pipe的应用
1-在html文件中使用管道;(管道符合使用,用‘:’号隔开)
①页面中添加;
<div class="table_content" *ngFor="let item of result">
<div class="col1">{{item.DESC}}</div>
<div class="col2" *ngIf="item.DATA">{{item.DATA}}</div>
<div class="col3" *ngIf="item.ZB">{{item.ZB | decimal2:'%'}}</div>
</div>
②完成依赖注入;
import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { ReportCheckResultPage } from './report-check-result';
import { PipesModule } from '../../../../pipes/pipes.module'; @NgModule({
declarations: [
ReportCheckResultPage,
],
imports: [
PipesModule,
IonicPageModule.forChild(ReportCheckResultPage),
],
exports: [
ReportCheckResultPage
],
})
export class ReportCheckResultPageModule {}
pipes.module.ts
import { NgModule } from '@angular/core';
import { Decimal2Pipe } from './decimal2/decimal2';
@NgModule({
declarations: [Decimal2Pipe,],
imports: [],
exports: [Decimal2Pipe,]
})
export class PipesModule {}
2-在.ts文件中使用管道;
①导入相应文件;
import { ChinesePipe } from '../../../../pipes/chinese/chinese';//导入相应管道文件;
@IonicPage({
name: 'reportCheck',
segment: 'reportCheck'
})
@Component({
selector: 'page-report-check',
templateUrl: 'report-check.html',
})
export class ReportCheckPage {
constructor(
public navCtrl: NavController,
public navParams: NavParams,
public cp: ChinesePipe,
) {} formatFun(){
return this.cp.transform(key,res[key]);
}
②完成依赖注入;
import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { ReportCheckPage } from './report-check';
import { ChinesePipe } from '../../../../pipes/chinese/chinese'; @NgModule({
declarations: [
ReportCheckPage,
],
imports: [
IonicPageModule.forChild(ReportCheckPage),
],
exports: [
ReportCheckPage
],
providers:[ChinesePipe]
})
export class ReportCheckPageModule {}
Angular Pipe的应用的更多相关文章
- Angular 利用 marked.js 添加 Markdown + HTML 同时渲染的 Pipe
背景 最近在公司开发的一个项目需要在 Angular 上展示图文,并且需要同时支持 Markdown 和 HTML 对于同时支持 Markdown 和 HTML ,应该要分为编辑和渲染两部分考虑. 对 ...
- 如何解决angular不自动生成spec.ts文件
"schematics":{ "@schematics/angular:component": { "styleext": ...
- [转]VS Code 扩展 Angular 6 Snippets - TypeScript, Html, Angular Material, ngRx, RxJS & Flex Layout
本文转自:https://marketplace.visualstudio.com/items?itemName=Mikael.Angular-BeastCode VSCode Angular Typ ...
- Angular 6.X CLI(Angular.json) 属性详解
Angular CLI(Angular.json) 属性详解 简介 angular cli 是angular commond line interface的缩写,意为angular的命令行接口.在an ...
- ng 基础
文档 组件的工作只管用户体验,而不用顾及其它. 它应该提供用于数据绑定的属性和方法,以便作为视图和应用逻辑的中介者 组件应该把诸如从服务器获取数据.验证用户输入或直接往控制台中写日志等工作委托给各种服 ...
- [Angular 2] Understanding Pure & Impure pipe
First, how to use a build in pipe: <div class="pipe-example"> <label>Uppercase ...
- [Angular 2] Rendering an Observable with the Async Pipe
Angular 2 templates use a special Async pipe to be able to render out Observables. This lesson cover ...
- [Angular] Increasing Performance by using Pipe
For example you make a function to get rating; getRating(score: number): string { let rating: string ...
- [Angular] Bind async requests in your Angular template with the async pipe and the "as" keyword
Angular allows us to conveniently use the async pipe to automatically register to RxJS observables a ...
随机推荐
- SVN版本库修改URL路径或者IP地址
服务器的IP地址或者URL变更,版本库服务器的IP也要修改,因为当初安装SVN URL没有使用别名,所以使用的人都要修改客户端的IP,以下是参考网上的资料. 1.Windows TortoiseSVN ...
- 基于Vue的小日历(支持按周切换)
基于Vue的日历小功能,可根据实际开发情况按每年.每月.每周.进行切换 <template> <div class="date"> <!-- 年份 ...
- ip 百度地图 php
已知一个IP $ipname=api_hits($DT_IP); -------------- //apifunction getAddressComponent($ak, $longitude, $ ...
- C# 将Access中时间段条件查询的数据添加到ListView中
C# 将Access中时间段条件查询的数据添加到ListView中 一.让ListView控件显示表头的方法 在窗体中添加ListView 空间,其属性中设置:View属性设置为:Detail,Col ...
- 批处理注册dll时候 遇到错误:模块已加载,但对***dll的调用失败
解决方法 在批处理的第一行加入:cd /d %~dp0 然后在批处理上右键选择使用管理员权限运行
- 服务器大量的fin_wait1 状态长时间存在原因分析-1
上文描述了在出现大量fin-wait-1出现的原因,占用的内存等,这里讲一下如何处理这种情况. 首先,fin发送之后,有可能会丢弃,那么发送多少次这样的fin包呢?fin包的重传,也会采用退避方式,在 ...
- [转]sysctl -P 报错解决办法
问题症状 修改 linux 内核文件 #vi /etc/sysctl.conf后执行sysctl -P 报错 error: "net.bridge.bridge-nf-call-ip6ta ...
- java日志概述和原理
OK,现在我们来研究下Java相关的日志. 日志记录是应用程序运行中必不可少的一部分.具有良好格式和完备信息的日志记录可以在程序出现问题时帮助开发人员迅速地定位错误的根源.对于开发人员来说,在程序中使 ...
- Linux指令--grep
原文地址:http://www.cnblogs.com/peida/archive/2012/12/17/2821195.html.感谢作者的无私分享. Linux系统中grep命令是一种强大的文本搜 ...
- 浅谈Java Virtual Machine
Java Virtual Machine 就是指Java虚拟器,以下简称VM.关于VM的概念,最早出自CPU模拟器,众所周知的PC上的游戏机模拟器采用的便是和Java VM类似的技术.ja ...