Angular7 自定义管道pipe

首先介绍一下ng里的管道:

angular的自定义pipe
最基础的自定义pipe就是接收一个value,然后返回另外一个value。参数的形式不限,可以是string、number、object等任何类型。
接下来会做一个简单的自定义pipe的实例,比如我们在显示文件大小的时候,我们看到文件单位为byte需要转化为MB,这样相对来说可能会更好理解及清晰明了。在此之前,我们先了解下如何使用pipe。

当前例子的场景:后端返回我0,1,2对应的页面应该展示对应的文字,因为返回的是表格数据,并且字段有3个,用循环过于麻烦,所以直接使用自定义管道来显示当前的页面文字。
在终端输入:

ng g pipe xxxxx

在当前组建中创建一个自定义管道:

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'carState',
})
// tslint:disable-next-line:class-name
export class carStatePipe implements PipeTransform {

  constructor() { }

  transform(value: string): any {
      return value === '0' ? '不支持' : value === '1' ? '支持' : '临时维护';
  }
}

在使用这个管道的组件module.ts里引入

在这里插入图片描述
然后在html里使用当前管道
在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/weixin_40121676/article/details/111594380
今日推荐