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 单位

提示：如果条件允许，我们更推荐使用 Angular 内置语法，例如：

<div [style.border-radius.px]="1">px</div>
<div [style.border-radius.%]="1">%</div>
<div [style.border-radius.rem]="1">rem</div>
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
nzSafeNull

转换 Null 和 Undefined 为指定字符串

警告：在 v17.0.0 中被弃用，请使用空置合并运算符（??）替代，例如：

{{ value ?? '-' }}
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'