angular] object의 양방향 바인딩 조심



angular 코딩시 ng2-smart-table 에 source를 바인딩 하고 rowSelect 이벤트를 할당 한후 


<ng2-smart-table [settings]="codeSettings"
[source]="rmCodeGroupsLocal"
(deleteConfirm)="onDeleteConfirm($event)"
(rowSelect)="onCodeGroupSelect($event)"
(editConfirm)="onSaveConfirm($event)"
#flowTable
></ng2-smart-table>



다음과 같이 이벤트를 구현하였을때 
this.currCodeGroup = event.data 와 같이 구현할 경우 this.currCodeGroup 객체의 값을 this.currCodeGroup.id = "" 과깉이 초기화 하였을 경우 smart-table의 소스 데이타도 같이 초기화 되는 현상을 발견 했다.

object의 = 연산이 양방향으로 적용되는 듯 하여 Object.assign 구문을 사용하여 값만 copy 되도록 변경 한 후 정상적으로 기능이 동작 함을 확인 함.

currCodeGroup:CodeGroup ;  //CodeGroup 모델타입임.


onCodeGroupSelect(event):void {
console.log("selected code group");
console.log(event);
//this.currCodeGroup = event.data;
//this.newCodeGroup = this.currCodeGroup;
//값 copy
this.currCodeGroup = Object.assign({}, event.data);
this.newCodeGroup = Object.assign({}, this.currCodeGroup);

this.loadCodes();
}






덧글

댓글 입력 영역