乐趣区

关于spring:Angular自定义管道pipes过滤器

一、状态类型转对象的特定值

1、自定义管道过滤器 StatusFilterPipe.ts

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

export class PipeVo {
  value: string;
  label: string;
}

@Pipe({
  name: 'statusFilter',
  pure: false
})
export class StatusFilterPipe implements PipeTransform {transform(items: string, filter: PipeVo[]): any {if ((items !== '0' && !items) || !filter) {return items;}
    for (const one of filter){if (items === one.value || one.value.toString() === items.toString()){return one.label;}
    }
    return '未知';
  }
}

2、在 shared.module.ts 中将编写的过滤器共享进来

const DIRECTIVES = [
  StatusFilterPipe,
  ReplaceFilterPipe,
  DebounceInputDirective  // input 防抖
];
@NgModule({
    declarations: [
            // your components
            ...COMPONENTS,
            ...DIRECTIVES,
            ...WIDGETS
        ],
})

3、应用

<sv label="操作记录" col="2">{{selectedLog.operatorType | statusFilter: dic_sys_log_type_operator_options}}</sv>

阐明:

dic_sys_log_type_operator_options 的内容:

[{value:’A’, label:’ 张三 ’},{value:’B’, label:’ 李四 ’},{value:’C’, label:’ 王五 ’}]

当 selectedLog.operatorType 的值为 A、B、C 则别离显示 ’ 张三 ’、’ 李四 ’、’ 王五 ’

二、对字符串中的进行替换

1、自定义管道过滤器 ReplaceFilterPipe.ts

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

@Pipe({
  name: 'replaceFilter',
  pure: false
})
export class ReplaceFilterPipe implements PipeTransform {transform(items: string, ...args: any[]): any {if (!items){return ;}
    // return;
    let str = items;
    for (const arg of args){str = str.replace(new RegExp(arg, 'gm'), '');
    }
    return str;
  }
}

2、在 shared.module.ts 中将编写的过滤器共享进来

const DIRECTIVES = [
  StatusFilterPipe,
  ReplaceFilterPipe,
  DebounceInputDirective  // input 防抖
];
@NgModule({
    declarations: [
            // your components
            ...COMPONENTS,
            ...DIRECTIVES,
            ...WIDGETS
        ],
})

3、应用

<sv label="申请参数" col="1">{{selectedLog.params | replaceFilter: '%5B':'%5D'}}</sv>

将 selectedLog.params 中的 ’%5B’:’%5D’ 替换成 ”

集体博客 蜗牛

退出移动版