아무 이유없이 각도 4 속성 업데이트

Question

this.viewSegmentsForAnalysis = this.segmentsForAnalysis;을 ngOnInit() 동안 한 번만 설정하고 싶습니다. 그러나이 메서드를 호출하면 this.viewSegmentsForAnalysis의 값이 this.segmentsForAnalysis으로 업데이트됩니다. 업데이트를 유발할 수있는 원인은 무엇입니까?

ngOnInit() { 
    this.segmentsForAnalysis = this.submissionDetails.segmentations.filter((segment) => { 
     return segment.columns.length === 1; 
     }); 

    this.viewSegmentsForAnalysis = this.segmentsForAnalysis; 
} 

addSegmentsForAnalysis() { 
    this.segmentsForAnalysis.push({ 
     name: this.fileColumn.value, 
     overlapAnalysis: false, 
     columns: [{ 
     index: segmentIndex, 
     name: this.segmentTitle.value 
     }] 
    }); 
} 

Answer 1

참조 된 배열 개체에 대해 .slice() 메서드를 사용하여 새로운 값 집합을 사용할 수 있습니다. 배열 segmentsForAnalysis을 기반으로하며 새로운 세트를 만듭니다. 따라서 ngOnInit 번으로 다시 전화하지 않으면 업데이트되지 않습니다.
_{다시 구성 요소를 만들지 않는 한 발생하지 않습니다..}

그래서 이것을 사용 :

ngOnInit(){ 
....... 
    this.viewSegmentsForAnalysis = this.segmentsForAnalysis.slice(); 
     // add .slice here -------------------------------^^^^^^^^ 
} 

Answer 2

this.viewSegmentsForAnalysis = this.segmentsForAnalysis; viewSegmentsForAnalysis에 segmentsForAnalysis를 할당하면 viewSegmentsForAnalysis가 동일한 객체를 segmentsForAnalysis로 참조합니다. segmentsForAnalysis에서 무엇인가를 변경하면 분명히 동일한 객체를 참조하는 두 변수가 완전히 업데이트됩니다.

문제를 해결하려면 viewSegmentsForAnalysis에 대한 다른 개체를 만들어야합니다. 이렇게하려면 this.viewSegmentsForAnalysis = this.segmentsForAnalysis를 바꿉니다.

this.viewSegmentsForAnalysis = JSON.parse(JSON.stringify(this.segmentsForAnalysis));