Angular重构数组字段的解决方法示例
更新时间：2022年09月20日 11:13:23 作者：再花
这篇文章主要为大家介绍了Angular重构数组字段的解决方法示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
问题
有些数据过多的下拉框数组没法静态定义，只能通过API获取，但API给出的数组字段各式各样，而我弹窗中的下拉框对数组的字段却是固定的，例如：
API给的数据结构是：
{
id:'',
text:''
}
而我弹窗所需要的固定数据结构为：
{
type:'',
value:''
}
调用的代码为：
<mat-select *ngSwitchCase="'select'" [formControlName]="form.value" [required]="form.required">
<mat-option *ngFor="let opt of form.selectArr" [value]="opt.value">
{{ opt.label ? opt.label : opt.type }}
</mat-option>
</mat-select>
也就是说，我需要将数组中所有的id修改为value，text修改为type
解决办法
解决思路：我不打算直接去修改原来的数组字段，而采用push的方式。
也就是我设置一个空数组，利用一个foreach循环，使其type=text，value=id，将原来的数据一个一个push进这个空数组，最后循环结束得到的就是我想要的数组了。
sProductCat1List: any[] = [{ type: '', value: '' }]; // 定义数组
this.supplierService.getsProductCat1().subscribe(res => {
const List = res['data'] || []; // 第一步
let i = 0; // 第二步
List.forEach(index => { // 第三步
this.sProductCat1List[i].type = index.text;
this.sProductCat1List[i].value = index.id;
i++;
this.sProductCat1List.push({ type: '', value: '' });
});
});
this.supplierService.getsProductCat1()为获取API数组的函数，在此不多做解释。
定义数组：之所以没有设置为any[] = []，是因为空数组无法push进{ type: '', value: '' }第一步：设置一个常量数组，用于获取API的原数组 第二步：设置循环数字（好像也可以不设置，主要是用来检测） 第三步：注意，因为定义的数组{ type: '', value: '' }，所以需要先传值，再push，如果你需要一个{ type: '', value: '' }用来作为“不选中”，则可以先push再传值。
以上就是Angular重构数组字段的解决方法示例的详细内容，更多关于Angular重构数组字段的资料请关注脚本之家其它相关文章！
相关文章
这篇文章主要介绍了angular中的默认路由的用法,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-02-02
跨域，前端开发中经常遇到的问题，下面这篇文章主要给大家介绍了关于angular.js中解决跨域问题的三种方式，文中介绍的非常详细，对大家具有一定的参考学习价值，需要的朋友们下面跟着小编一起来学习学习吧。2017-07-07
本文主要介绍AngularJS 表单,这里对AngularJS 表单知识做了详细整理介绍,希望能帮助有需要的小伙伴2016-07-07
AngularJS service之select下拉菜单效果
这篇文章主要为大家详细介绍了AngularJS service之select下拉菜单效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-07-07
这篇文章主要介绍了angular 实现下拉列表组件的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-03-03
这篇文章主要深入的给大家介绍了Angularjs向指令传递数据，双向绑定机制的相关资料,需要的朋友可以参考下2016-12-12
这篇文章主要介绍了Angularjs中关于跨域设置白名单问题,需要的朋友可以参考下2018-04-04
AngularJS基础 ng-mousemove 指令简单示例
本文主要介绍AngularJS ng-mousemove 指令,这里帮大家整理了ng-mousemove 指令的详细资料,并附有示例代码,有需要的朋友参考下2016-08-08
本文主要讲解AngularJS模块的相关知识，这里整理了详细的基础资料，并提供示例代码和示例实现效果图，有兴趣的小伙伴可以参考下2016-08-08
这篇文章主要给大家介绍了关于在Angular.js中下拉框实现渲染html的方法，文中通过示例代码介绍的非常详细，对大家具有一定的参考学习价值，需要的朋友们下面来跟着小编一起来学习学习吧。2017-06-06
最新评论