Angular 通过管道pipe，转换后台字典数据

背景：系统中很多字典数据都是在后台获取，通常是一些数字或者字母。我们要把他转换成用户看得懂的文字

一.列表字典数据转换（只能在页面使用）

1.创建pipe文件

dictData 为页面查询到的字典数据，传到pipe 管道里使用

import {Pipe, PipeTransform} from '@angular/core';
import {DictService} from "../components/dict-data-select/dict-data-select/dict.service";@Pipe({name: 'dictData'
})
export class DictDataPipe implements PipeTransform {transform(value: unknown, dictList: Array<any>) {return value ? this.returnIt(value, dictList).label : '';}returnIt(code: any, dictList: any) {for (const item of dictList) {if (item.value === code) {return item;}}}}

2.页面使用

dictData 为页面查询到的字典数据，传到pipe 管道里使用

 {{data.officeType | dictData:dictList}}

二.通过自定义组件实现列表和表单下拉框的转换（可在页面和表单使用）

1.自定义组件dict-data-select

可选参数：

dictKey // 用于传到组件查询字典数据库的参数

mode // ‘list’参数代表页面使用，'form'代表表单使用

value // 字典的值

import {Component, EventEmitter, forwardRef, Input, OnChanges, OnInit, Output} from '@angular/core';
import {DictService} from "./dict.service";
import {ControlValueAccessor, NG_VALUE_ACCESSOR} from "@angular/forms";export const EXE_COUNTER_VALUE_ACCESSOR: any = {provide: NG_VALUE_ACCESSOR,useExisting: forwardRef(() => DictDataSelectComponent),multi: true
};@Component({selector: 'app-dict-data-select',templateUrl: './dict-data-select.component.html',styleUrls: ['./dict-data-select.component.less'],providers: [EXE_COUNTER_VALUE_ACCESSOR]
})
export class DictDataSelectComponent implements OnInit, OnChanges, ControlValueAccessor {@Output() dataChange = new EventEmitter();@Output() event = new EventEmitter();@Input() dictKey: any = {};@Input() value: any = '';@Input() mode: 'form' | 'list' | 'searchForm' = 'form';@Input() width: string = '100%';dictList: any = []// value: string = null;constructor(private dictService: DictService) {}ngOnInit() {this.getDictList();}ngOnChanges() {// this.getDictList();}getDictList() {const self = this;self.dictService.getDictList((_ary: Array<any>, _count: number) => {this.dictList = _ary;}, (_code: string, _msg: string) => {}, self.dictKey);}change(ev: any) {this.onChange(ev);const obj = this.dictList.filter((v: { value: any; }) => v.value === ev);if (obj && obj.length > 0) {this.dataChange.emit(obj[0]);}}/* ControlValueAccessor */onChange(_: any) {}writeValue(value: any) {this.value = value;}registerOnChange(fn: any) {this.onChange = fn;}registerOnTouched(fn: any) {}/* end ControlValueAccessor */}

<ng-container *ngIf="mode=='form'"><nz-select  style="width: {{width}}" [(ngModel)]="value" (ngModelChange)="change($event)"><nz-option *ngFor="let item of dictList" [nzLabel]="item.label" [nzValue]="item.value"></nz-option></nz-select>
</ng-container><ng-container *ngIf="mode=='list'"><ng-container *ngFor="let item of dictList"><span *ngIf="item.value==value">{{item.label}}</span></ng-container></ng-container>

2.在表单页面使用

3.在普通页面使用

参考文档：

Angular 管道之异步数据读取转换 - By DeathGhost

Angular 通过管道pipe，转换后台字典数据相关推荐

[转]Angular2 使用管道Pipe以及自定义管道格式数据
本文转自:https://www.pocketdigi.com/20170209/1563.html 管道(Pipe)可以根据开发者的意愿将数据格式化,还可以多个管道串联. 纯管道(Pure Pipe ...
iconv 文件编码转换--知网的情感字典数据
背景: 下载了知网的情感字典数据,打开的时候是乱码,但是英文的字典数据是可以直接看的,很奇怪. 乱码形式如下: 原因 : 不知道上传文件的人用什么编码方式,mac默认了utf-8解码方式解决: 问了 ...
php+管道+pipe管道,angular2+管道pipe
一.什么是Pipe? 就是管道,简单来说,管道的作用就是传输.并且不同的管道具有不同的作用.(其实就是处理数据) 二.pipe用法 {{ 输入数据 | 管道 : 管道参数}} (其中'|'是管道操作 ...
Angualr设置自定义管道Pipe（类似Vue的过滤器filters）货币格式化（实现内置管道CurrencyPipe的功能）
新建管道: ng g pipe pipes/money或ng g p pipes/money pipes/money.pipe.ts,同时在父级module.ts加入 im ...
linux进程间通信：无名管道 pipe
文章目录内核层实现结构通信原理特点使用函数声明使用实例单向通信双向通信编程注意事项管道中无数据时读操作会阻塞将管道的写端句柄关闭,不会影响读端数据读取管道中没有数据,写操作关 ...
Java-NIO（九）：管道 (Pipe)
Java NIO 管道是2个线程之间的单向数据连接.Pipe有一个source通道和一个sink通道.数据会被写到sink通道,从source通道读取. 代码使用示例: 1 @Test 2 publi ...
进程间的通信方式（二）：管道Pipe和命令管道FIFO
1.概述管道是最初的Unix IPC通信,可追溯到1973年的Unix第三版.尽管对于许多操作来说很有用,但它们的根本局限于没有名字,只能由亲缘关系的进程使用.这一点随着FIFO的加入System ...
Linux内核中无名管道pipe和有名管道fifo的分析
1.管道(pipe) 管道是进程间通信的主要手段之一.一个管道实际上就是个只存在于内存中的文件,对这个文件的操作要通过两个已经打开文件进行,它们分别代表管道的两端.管道是一种特殊的文件,它不属于某一种 ...
机器学习(2.sklearn(Scikit-learn)库、字典数据的特征抽取)
sklearn(全称Scikit-learn库介绍) •Python语言的机器学习工具 •Scikit-learn包括许多知名的机器学习算法的实现 •Scikit-learn文档完善,容易上手,丰富的 ...

Angular 通过管道pipe，转换后台字典数据

一.列表字典数据转换（只能在页面使用）

二.通过自定义组件实现列表和表单下拉框的转换（可在页面和表单使用）

Angular 通过管道pipe，转换后台字典数据相关推荐

最新文章

热门文章