当前位置: 代码网 > it编程>前端脚本>AngularJs > Angular重构数组字段的解决方法示例

Angular重构数组字段的解决方法示例

2024年05月19日 AngularJs 我要评论
问题有些数据过多的下拉框数组没法静态定义,只能通过api获取,但api给出的数组字段各式各样,而我弹窗中的下拉框对数组的字段却是固定的,例如:api给的数据结构是:{ id:', tex

问题

有些数据过多的下拉框数组没法静态定义,只能通过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重构数组字段的资料请关注代码网其它相关文章!

(0)

相关文章:

版权声明:本文内容由互联网用户贡献,该文观点仅代表作者本人。本站仅提供信息存储服务,不拥有所有权,不承担相关法律责任。 如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 2386932994@qq.com 举报,一经查实将立刻删除。

发表评论

验证码:
Copyright © 2017-2025  代码网 保留所有权利. 粤ICP备2024248653号
站长QQ:2386932994 | 联系邮箱:2386932994@qq.com