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 {}
上一篇:Android Scheme协议与应用全解析


下一篇:Apache Arrow