问题解析：Angular下拉框动态数据字段映射
在进行 Angular 开发时，常会遇到这样一个典型场景：下拉选择框的选项数据无法在代码中硬编码，必须通过 API 接口动态获取。然而，API 返回的数组字段命名往往与前端弹窗组件所需的字段结构不一致。比如，接口返回的数据格式如下：
{
id:'',
text:''
}
但弹窗组件所要求的数据结构却是这样的：
{
type:'',
value:''
}
对应的模板代码大致如下所示：
{{ opt.label ? opt.label : opt.type }}
简单来说，就是需要手动将 API 数组中的 id 字段映射为 value，将 text 字段映射为 type。
解决方案：借助新数组实现字段重构
针对这类字段映射需求，通常有两种实现思路：一种是直接修改原始数组，另一种是构建一个新的数组。我选择的是后者——不破坏原始数据，而是用一个空数组作为容器，通过 forEach 循环逐项将数据“搬运”过来，同时完成字段名的转换。具体代码实现如下：
sProductCat1List: any[] = [{ type: '', value: '' }]; // 定义初始数组
this.supplierService.getsProductCat1().subscribe(res => {
const List = res['data'] || []; // 第一步：获取API数据
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: '' } 对象——你需要先有一个初始元素，然后才能通过 push 追加后续项。因此我们预先赋了一个占位对象。
具体步骤拆解如下：
- 第一步：将 API 返回的数据存入临时常量，便于后续遍历。
- 第二步：声明一个计数器变量（非必须，但增加代码清晰度）。
- 第三步：遍历原始数组，先为当前索引位置的对象赋值（修改已有的
type和value），然后通过push添加一个新对象供下次使用。注意这里的执行顺序——如果希望第一个{ type: '', value: '' }作为“不选中”的默认选项，则需要调整顺序：先 push，再赋值。
至此，数组字段重构就完成了。这种方法的优势在于：原始数组不受影响，逻辑清晰直观，且易于扩展（例如增加更多字段映射时也非常方便）。
