Angular 自定义管道pipes的使用

Angular的管道是处理数据到显示的逻辑，我们获取的用户的roles是json的数组，并不能直接展示，所以需要写一个管道展示用户所有的角色。

创建src/app/helpers/pipes.ts写一个自定义管道arrayToString

/**
*
* @param value 传入值
* @param defaultStr 默认显示
* @param split 分割符
* @param key object的key值
*/
transform(value: Array<any>, defaultStr = '', split = ',', key?: string): string {
if (value.length) {
let strs;
if (key) {
strs = new Array();
for (let v of value) {
for (let k in v) {
if (k == key) {
strs.push(v[k]);
}
}
}
} else {
strs = value;
}
return strs.join(split);
} else {
return defaultStr;
}
}

在src/app/app-routing.module.ts导入

import { ArrayToStringPipe } from './helpers/pipes';

并添加到declarations

declarations: [
...
ArrayToStringPipe,
...
]

在模板中使用src/app/views/user/list.component.html

{{m.roles | arrayToString:'普通用户':',':'name'}}

《PHP微服务练兵》系列索引:https://www.geek-share.com/detail/2790050496.html

• 点赞
• 收藏
• 分享
• 文章举报