Angular中如何将静态数据添加到服务器返回的动态响应数组中？

Hey there! 要把静态数据里的对象添加到从服务器获取的动态数组里，在Angular里有几种简单又常用的方式，我给你详细说说：

方法一：使用数组push()方法（修改原数组） #

如果你想直接在获取到的动态数组基础上添加元素，可以用push()。如果静态数组mapD里有多个元素，就遍历逐个添加；如果只有一个元素，直接push单个元素就行：

// 假设你通过HTTP服务请求数据
this.yourDataService.fetchMapData().subscribe(res => {
  // 先把服务器返回的动态数据赋值给mapData
  this.mapData = res.Data;
  
  // 方式1：遍历静态数组，逐个添加元素
  this.mapD.forEach(item => {
    this.mapData.push(item);
  });

  // 方式2：如果确定mapD只有一个元素，直接push单个元素更简洁
  // this.mapData.push(this.mapD[0]);
});

方法二：使用concat()方法（返回新数组） #

concat()方法会合并两个数组并返回一个新数组，不会修改原有的动态数组，适合需要保留原数据的场景：

this.yourDataService.fetchMapData().subscribe(res => {
  // 合并动态数据和静态数据，得到新数组赋值给mapData
  this.mapData = res.Data.concat(this.mapD);
});

方法三：使用ES6扩展运算符（...）（返回新数组） #

用扩展运算符的写法更简洁直观，同样是生成新数组：

this.yourDataService.fetchMapData().subscribe(res => {
  // 把动态数组和静态数组的元素都展开到新数组里
  this.mapData = [...res.Data, ...this.mapD];
});

小提示 #

如果你的静态数据mapD后续可能有多个元素，上面的方法都能自动把所有元素合并进去；如果始终只有一个元素，也可以直接写[...res.Data, this.mapD[0]]来简化。

内容的提问来源于stack exchange，提问作者Shyam Nair