Angular中如何将HTTP请求返回的数组复制到新数组用于ng2-charts

嘿，别担心，这事儿其实挺简单的！我们只需要正确定位API返回的数据结构，再用合适的方式复制数组就行。

先理清楚数据结构 #

你从AWS拿到的JSON是这样的：

{ "System1": [ { "name": "MF3", "descr": "Multifilo MF3", "speed": [1,2,3,4], "time": ["10.01", "10.02", "10.03", "10.04"] } ] }

这里的核心是：System1是一个数组，里面的第一个元素就是包含speed和time的目标对象。

修改你的getdata()方法 #

在subscribe的回调里，我们可以这样操作来完成数组复制：

public lineChartSpeed: Array<number> = [];
lineChartTime: Array<any> = [];
result: Array<ImpiantoModel>;

getdata() {
  this.http.get(this.myUrl)
    .subscribe( data => {
      this.result = data;
      
      // 先做个安全检查，避免System1为空或者不存在时报错
      if (data.System1 && data.System1.length > 0) {
        const targetSystem = data.System1[0];
        
        // 复制speed数组到lineChartSpeed
        // 用扩展运算符做浅拷贝，适合数字/字符串这类基本类型数组
        this.lineChartSpeed = [...targetSystem.speed];
        
        // 复制time数组到lineChartTime
        this.lineChartTime = [...targetSystem.time];
        
        // 你也可以用这两种方式复制，效果完全一样：
        // this.lineChartSpeed = targetSystem.speed.slice();
        // this.lineChartTime = Array.from(targetSystem.time);
      } else {
        // 如果没有数据，清空图表数组，避免图表显示异常
        this.lineChartSpeed = [];
        this.lineChartTime = [];
      }
    });
}

给你个类型定义的小建议 #

你当前用的http.get<SystemModel[]>(this.myUrl)泛型可能不太准确，因为API返回的是一个包含System1属性的对象，而不是SystemModel数组。建议调整类型定义，让TypeScript帮你做更严谨的类型检查：

// 定义单个系统的详情类型
interface SystemDetail {
  name: string;
  descr: string;
  speed: number[];
  time: string[];
}

// 定义API返回的整体响应类型
interface SystemResponse {
  System1: SystemDetail[];
}

然后把请求改成：

this.http.get<SystemResponse>(this.myUrl)

为啥要用这些复制方法？ #

直接赋值（比如this.lineChartSpeed = targetSystem.speed）会让两个变量指向同一个数组引用，后续修改其中一个时另一个也会跟着变。而扩展运算符、slice()、Array.from()都是浅拷贝的方式，能让你得到一个独立的新数组，完全不用担心引用关联的问题，对于存储基本类型的数组来说非常合适。

内容的提问来源于stack exchange，提问作者Nicolò Scapin