angular 字典值处理方法

最新推荐文章于 2025-04-19 00:06:39 发布

原创

最新推荐文章于 2025-04-19 00:06:39 发布 · 841 阅读

0 ·

CC 4.0 BY-SA版权

在基金产品的提醒类型中，如'净值波动提醒'对应后台值'A'。文章讨论了如何处理字典值，避免后台修改值导致前端代码频繁变动。最初考虑使用switch case，但发现这将使字典失去意义。最终采用的方法是在使用字典值时进行动态转换，以适应后台值的变化和新提醒类型的添加。

以基金产品中的提醒类型为例，某个提醒为“净值波动提醒”，后台要的值为“A”，前台要显示为“净值波动提醒”，可以在后台增删修改提醒类型。
相关字典值
提醒类型 REMIND_TYPE
产品类型 REMIND_FUND_TYPE

转换嘛，最初想到的是用switch case，但后来发现能实现想要效果，但字典值就失去了意义。试想，如果在后台修改“净值波动提醒”对应的值为“B”，那前端代码中是不是还要手动去修改转换对应的代码？同理新增提醒类型也是，仍需要手动去维护前端代码。

// html中“提醒类别”的select标签里添加事件
(ngModelChange)="typeChange()"

// ts中
typeChange(){
   
   
	// 所在位置getLoadListBody
	// sRemindType  A,后端要的值
	switch(</

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Thelittlewhale

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

Angular 开发

qt的博客

02-27

5795

Angular 企业实战开发 1. 概述 Angular 是一个使用 HTML、CSS、TypeScript 构建客户端应用的框架，用来构建单页应用程序。 Angular 是一个重量级的框架，内部集成了大量开箱即用的功能模块。 Angular 为大型应用开发而设计，提供了干净且松耦合的代码组织方式，使应用程序整洁更易于维护。 Angular Angular 中文 Angular CLI 2. 架构预览 2.1 模块 Angular 应用是由一个个模块组成的，此模块指的不是ESModule，而是 Ng

Angular学习教程-英雄之旅

weixin_42417934的博客

01-04

2849

Angular学习教程-英雄之旅官网链接 https://angular.cn/tutorial 文章目录Angular学习教程-英雄之旅一、能学习到二、创建项目三、英雄编辑器Part11.创建英雄列表组件2.添加 `hero` 属性4.显示英雄5.启动Part21.创建Hero类2.把组件的 `hero` 属性的类型重构为 `Hero`。3.显示 `hero` 对象4.双向绑定5.缺少 `FormsModule`最后结果四、显示英雄列表Part11.创建模拟（mock）的英雄数据2.显示这些英雄3.使用

参与评论您还未登录，请先登录后发表或查看评论

如何在AngularJs中使用ng-repeat进行词典？

xfxf996的博客

08-19

422

I know that we can easily use ng-repeat for json objects or arrays like: 我知道我们可以轻松地对json对象或数组使用ng-r

Angular：利用管道动态配置并维护数据字典

灿灿大王搭建的黄金屋

03-13

772

想要让用户(系统管理员)可以在页面上动态维护数据字典,而不是前端程序员将下拉选项等写死在页面上,那么就需要用到管道,通过标识符唯一定位到相应的字段上的下拉选项等中的内容。第一步，首先在系统的“数据字典”页面配置数据字典的名称、代码编号、便签和键值等信息：记住代码编号，这里以PUR_TYPE为例，这是要在 sys-status.pipe.ts中进行配置的唯一标识符： import {...

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

m173net的博客

04-29

1076

背景：系统中很多字典数据都是在后台获取，通常是一些数字或者字母。我们要把他转换成用户看得懂的文字一.列表字典数据转换（只能在页面使用） 1.创建pipe文件 dictData 为页面查询到的字典数据，传到pipe 管道里使用 import {Pipe, PipeTransform} from '@angular/core'; import {DictService} from "../components/dict-data-select/dict-data-select/dict.servic

Angular2 字典的实现

qq_21209307的博客

04-01

577

使用Map 创建Map类型的字典，增加元素 this.dicMap = new Map<string,number>(); dicMap.set("zhangsan",20); dicMap.set("lisi",30); dicMap.set("wangwu",40); ...

Angular | 已知字典表value值，反显对应label

栈斗民族的博客

05-20

876

应用场景在一些业务场景中，尤其是表单展示数据时，会包含一些存为字典表的数据，比如地址信息等，后端接口如果只返回了key值，则需要前端通过调用字典表接口去查询value值来反显到表单上。业务html: dictSrv.province$是字段对应的字典表接口，返回值为Observable；dictTrans是字典转换管道(Pipe)；province是后端传回的key取值；value和label的传值具体根据字典表返回的key和value对应的字段 <div>省份: {{ dictSrv.pr

Angular应用的国际化与本地化解决方案

比如使用 `Globalize.formatDate()` 和 `Globalize.formatNumber()` 方法来动态输出符合当地习惯的值，从而提升用户体验的一致性和专业性。 L2 层次才是我们通常所说的“本地化”——即将用户界面中的静态文本翻译...

前端使用 Angular.js 实现动态表单的技巧

最新发布

小白菜的博客

04-19

994

在前端开发中，动态表单是一种非常常见且实用的功能。它可以根据用户的操作、业务规则或数据的变化，动态地生成表单元素，从而为用户提供更加灵活和个性化的交互体验。本文的目的就是详细介绍如何使用 Angular.js 这个强大的前端框架来实现动态表单。范围涵盖了从基本概念的讲解到具体代码的实现，以及实际应用场景和相关资源的推荐，帮助开发者全面掌握使用 Angular.js 实现动态表单的技巧。本文将按照以下结构进行详细阐述：首先介绍核心概念与联系，让读者了解 Angular.js 实现动态表单的基本原理；

Angular2 TypeScript 实现Dictionary

qq_21209307的博客

04-09

294

代码实现 export class Dictionary { items: object; constructor() { this.items = {}; } has(key: any): boolean { return this.items.hasOwnProperty(key); } set(key: any,...

AngularJS操作键值对象类似java的hashmap(填坑小结)

10-21

我们知道java的hashmap中使用最多的是put(...),get(...)以及remove()方法，那么在angularJS中如何创造（使用）这样一个对象呢？今天小编通过本文给大家分享下，感兴趣的朋友一起学习吧

字典中判断某个key是否存在

weixin_43745987的博客

01-07

9240

描述背景：测试评论接口中，有的评论是对帖子（文章），有的是对评论的评论，postman 测试传参时，有的要传帖子id，有的要传评论id,后台要判断传入的参数是哪个id，自己一时转不来弯了，所以到这里来记录一下传入的参数都是属于字典类型，要判断这个参时是否在这个字典里有两种方法： 1. 字典.has_key(‘参数key’) 2. ‘参数key’ in 字典.keys(): ``` data =...

angularJs通过过滤器实现获取数据字典

ouwaner的专栏

09-19

3653

//缓存数据字典 var dicMap = JSON.parse(dictData); /** * 获取字典值的方法 * @param key 关键字 * @param type 大类 * @return 返回结果对像 success为true，则value为字典值 */ arm.getDict = function(key, type) { var re

angular 动态遍历数组中的字典

remember_persistent的博客

06-25

2561

问题描述：生成一个表格，表头信息存放在$scope.options.theads里面，数据格式为[{ 'rows': [{ 'isedit': '0', 'title': 'pubtime', 'iscombine': '0', 'colspan': 1, 'rowspan': 1, 'field': 'xx...

Angular6 键值对的两种方式

weixin_30464371的博客

11-08

3033

1.数组脚标 rating: { [key: string]: number; } = { ‘t’: 3, ‘o’: 5, ‘g’: 10 }; 2.Map map = new Map<string, string>();

angular 字符串转换成数字_每周一课 | Python 示例拆分字符串入到字典里面

weixin_39779739的博客

10-22

149

很少有Python示例向您展示如何将字符串拆分为字典。1.1将字符串拆分成字典。#!/usr/bin/pythonstr = "key1=value1;key2=value2;key3=value3"d = dict(x.split("=") forxin str.split(";"))fork, v in d.items():print(k, v)输出量key1value1ke...

Angular2 管道pipe，如何自定义管道

erciyuan_nuonuo的博客

11-20

7756

作为一名前端er，我们的数据要推入到视图中，但是HTML视图中显示的格式和数据未必完成相同，比如我们的数据都是小写，但是视图中需要显示大写，如果我们在代码中另存一组转换为大写的数据，不但会使代码变得复杂难以维护，而且可阅读性差，ng2中的管道完美的解决了这个问题。ng2内置了很多管道，比如DatePipe 、 UpperCasePipe 、 LowerCasePipe 、 CurrencyPipe

Angular中数组与字典循环写法

weixin_30328063的博客

08-29

436

数组1、 for (const i in declareItems) { 　　if (declareItems.hasOwnProperty(i)) { 　　　　const index = i；　　　　constdeclareItem =declareItems[i]; 　　} } 数组2、 for (const item of declareItem...

typescript中使用字典类型Dictionary

assassin_0302的博客

02-21

8504

参考文章：https://blog.csdn.net/bingheliefeng/article/details/72778696 //key为string , value为number var map: { [key: string]: number; } = { "t" : 3, "o" : 5, "g" :10 }; for(let k in map){ ...