angular自定义管道

1.cmd进入到相应的项目中
2.使用 ng g pipe 管道文件名/管道名 (最好保持一致)

生成这样的文件形式

文件内容

@Pipe({
  name: 'changePipe',
})

这个name名就是调用该管道的·名称

插值表达式中使用changePipe管道，
这里我是结合 *ngFor 使用的，处理定义的json数据

自定义json数据格式

  obj: any = [
    {
      id: 0,
      name: '小明',
      age: '18',
      hobby: '打球',
    },
    {
      id: 1,
      name: '小王',
      age: '20',
      hobby: '吃辣条',
    },
    {
      id: 2,
      name: '小红',
      age: '16',
      hobby: '学习',
    },
    {
      id: 3,
      name: '小李',
      age: '20',
      hobby: '打游戏',
    }
  ];

未使用管道时是这样的

实现效果：使用管道检测key值，转换为对应的中文名称

管道接收的两个参数：

value是循环出来的参数值，这个值是可以通过管道return进行替换的；
args我的理解是辅助value值进行改变的，这里没用到，但是我将部分效果放下下面

拿到value值后进行操作

页面效果：

总结:angular的管道可以当做过滤器使用，之前在写vue项目的时候忽视了该用法，现在在angular中体验到了该方法的好处，可以多用于数据的处理。