Angular4是數組引用類型

Question

我有返回一些JSON HTTP服務和予訂閱可觀察到的，那麼結果分配給兩個數組：

selectedData: any[]; 
selectedList: any[]; 

private get() { 
    this.dataService 
     .Get() 
     .subscribe(data => { 
      this.selectedData = data; 
      this.selectedList = data; 
     }, (error) => { 
      console.log(error); 
     }); 
} 

現在我每次更改下拉時間，我有兩者都是相同的對象：

onChange(selectedValue) { 
    console.log(this.selectedData); 
    console.log(this.selectedList); 
    this.selectedData["exercisesProgress"] = this.selectedData["exercisesProgress"].filter(x=>x.id == selectedValue); 
} 

aka selectedData和selectedList都在我檢入控制檯時被過濾。這是同一個參考還是？我是否必須創建selectedList的新實例並將數據推送到selectedList，而不是直接分配？

Answer 1

我與複製解決它Object.assign對象（{}，數據）：

private get() { 
    this.dataService 
     .Get() 
     .subscribe(data => { 
      this.selectedData = data; 
      this.selectedList = Object.assign({}, data); 
     }, (error) => { 
      console.log(error); 
     }); 
} 

onSelect(event) { 
    console.log(event); 
} 

onChange(selectedValue) { 
    console.log(this.selectedData); 
    console.log(this.selectedList); 
    this.selectedData = Object.assign({}, this.selectedList); 
    this.selectedData["exercisesProgress"] = this.selectedData["exercisesProgress"].filter(x=>x.id == selectedValue); 
} 

Answer 2

您可以使用解構當你初始化值selectedData和selectedList。這將使這兩個數組從一開始彼此權分離，你不會有那個點後擔心。

private get() { 
    this.dataService.Get() 
    .subscribe(data => { 
     this.selectedData = [...data]; // <======= 
     this.selectedList = [...data]; // <======= 
    }, (error) => { 
     console.log(error); 
    }); 
}