Angular4は、私はいくつかのJSONを返すHTTPサービスを持っている

Question

配列参照型であり、私が観測に加入し、その後、二つの配列に結果を割り当てます。

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の値を初期化するときは、非構造を使用することができます。これにより、最初から2つの配列を互いに分離することができます。その点の後で、それを心配する必要はありません。

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