Pipes

NG-ZORRO 实验性功能是指已发布但不稳定或者还未准备好用于生产环境的功能。

开发者或用户可以选择在正式发布前使用这些功能，但是每次发布版本时都可能存在 breaking changes。

项目中常用 Pipe 集合

何时使用#

  • 引入 Pipe 后，像 angular 的默认 Pipe 一样使用
import { NzPipesModule } from 'ng-zorro-antd/pipes';

代码演示

  • 200 B
  • 1 kB
  • 1 MB
  • 1 MB
  • 1 GB
  • 1 TB
  • 1024 MB
nzBytes

存储单位的换算，增加可读性

expand codeexpand code
加载中
Default
%
rem
nzToCssUnit

Css 单位

expand codeexpand code
加载中

Ant Design, a design language for ba...

nzEllipsis

截断字符串，用指定的字符串结尾

expand codeexpand code
加载中
Max [7, 8, 2, 3]
8
Min [7, 8, 2, 3]
2
Sum [7, 8, 2, 3]
20
Avg [7, 8, 2, 3]
5
nzAggregate

数组的Sum、Min、Max、Average等聚合操作

expand codeexpand code
加载中
NameAgeAddress
John Brown32-
Jim Green42-
Joe Black32Sidney No. 1 Lake Park
  • 1
    • nzSafeNull

    转换 Null 和 Undefined 为指定字符串

    expand codeexpand code
    加载中
    I am innerHTML
    nzSanitizer

    DomSanitizer 的 Pipe 实现

    <div [innerHTML]="html | nzSanitizer: 'html'"></div>
<div [style]="style | nzSanitizer: 'style'"></div>
<img [src]="url | nzSanitizer: 'url'" />
<iframe [src]="resourceUrl | nzSanitizer: 'resourceUrl'"></iframe>
    expand codeexpand code
    加载中

     Ant Design 
    Ant Design
    nzTrim

    去除字符串左右空字符串

    expand codeexpand code
    加载中

    API#

    nzSafeNull#

    参数说明类型默认值
    replace替换字符string''

    nzBytes#

    参数说明类型默认值
    decimal保留小数位number'0'
    from当前值的单位string'B'
    to转换到目标值的单位string''

    nzToCssUnit#

    参数说明类型默认值
    defaultUnit默认单位string'px'

    nzEllipsis#

    参数说明类型默认值
    length截取长度number''
    suffix替换字符string''

    nzAggregate#

    参数说明类型默认值
    method聚合方式'sum' | 'max' | 'min' | 'avg'''

    nzSanitizer#

    参数说明类型默认值
    typesanitizer 类型string'html'