angular 管道

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

李卓书

959人浏览 · 2022-05-11 01:18:03

李卓书 · 2022-05-11 01:18:03 发布

说明

用来处理数据的

常用的Pipe（管道）函数

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

用法

例子

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去写既可