angular 管道

说明

用来处理数据的

常用的Pipe(管道)函数

管道功能
DatePipe格式化日期
JsonPipeJSON.stringify()化后输出
UpperCasePipe转大写
LowerCasePipe转小写
DecimalPipe将数值按照特定的格式显示
CurrentcyPipe数值货币化处理
SlicePipe数组或者字符串裁剪成新子集
PercentPipe转成百分比格式
DatePipe格式化日期
DatePipe格式化日期

用法

{{xxxx | 管道1:管道参数1 | 管道2:管道参数2}}

例子

import { Component } from '@angular/core';
import { FormControl, FormGroup, FormBuilder, Validators } from '@angular/forms';

@Component({
  selector: 'app-root',
  // templateUrl: './app.component.html',
  template: `
   管道处理
   <br>
   DatePipe : 处理前: {{date}}----处理后:{{date | date:"yyyy"}}
  `,
  styleUrls: ['./app.component.less']
})
export class AppComponent {
  constructor(private fb: FormBuilder) {

  }
  date = new Date();
   
}

在这里插入图片描述

参考手册

DatePipe

{{ dateTime | date:'yyyy-MM-dd HH:mm:ss'}} // 1989-07-22 10:21:21
{{ dateTime | date:'medium' }} // 1989年7月22日 上午10:21:21
{{ dateTime | date:'short' }} // 1989/7/22 上午10:21
{{ dateTime | date:'fullDate' }} // 1989年7月22日星期六
{{ dateTime | date:'longDate' }} // 1989年7月22日
{{ dateTime | date:'mediumDate' }} // 1989年7月22日
{{ dateTime | date:'shortDate' }} // 1989/7/22
{{ dateTime | date:'mediumTime' }} // 上午10:21:21
{{ dateTime | date:'shortTime' }} // 上午10:21

全部管道参考

String -> String
  UpperCasePipe
  LowerCasePipe
  TitleCasePipe
Number -> String
  DecimalPipe
  PercentPipe
  CurrencyPipe
Object -> String
  JsonPipe
  DatePipe
Tools
  SlicePipe
  AsyncPipe
  I18nPluralPipe
  I18nSelectPipe

当然管道还可以自定义使用
使用 ng g p xxx
使用的时候根据name去写既可

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

李卓书

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值