각도 2 - ngModel 업데이트

Question

테이블 목록이 있습니다.

(click)="selectedTable=table" 

을 그리고 selectedTable의 편집을 가능하게하는 새로운 형태의 appeaers : 사용자가 테이블을 클릭하면이 문제가 발생합니다.

<md-input [(ngModel)]="selectedTable.name" name="name"></md-input> 

변경 사항을 업데이트하는 버튼 ..

<button (click)="updateTable(selectedTable)">Update</button> 

과 취소 버튼 : 이

내 문제

취소 양식은 다음과 같은 입력을 포함 입력을 업데이트하면 테이블 목록 (인터페이스)도 변경됩니다. 입력에. 그러나 입력 내용을 변경 한 후 "취소"을 클릭하면 인터페이스는 업데이트 된 테이블이있는 테이블 목록을 표시합니다.이 테이블은 인터페이스에서 만 업데이트되며 서버 쪽에서는 업데이트되지 않습니다 (업데이트를 클릭하지 않았으므로).

취소를 클릭하면 selectedTable의 변경 사항을 어떻게 되돌릴 수 있습니까?

다른 말로 : 입력을 기준으로 테이블을 변경하고 업데이트를 클릭 한 후에야 인터페이스에서 업데이트 할 수 있습니까?

Answer 1

업데이트를 클릭 할 때만 업데이트하려면 수정되지 않은 버전과 별도로 수정 된 값을 저장해야합니다. 이 경우 [(ngModel)]="newTable.name" 또는 비슷한 것을 바인딩해야 함을 의미하며, 업데이트 기능이 실행될 때만 selectedTable = newTable을 할당합니다.

양방향 바인딩이 거의 실시간 업데이트 메커니즘이기 때문에 이것이 필요한 이유입니다. 입력 내용을 변경하면 즉시 [(ngModel)]에 반영됩니다.

제대로 작동하기 위해서는, 당신은 당신의 selectedTable의 모델에게 값을 할당 NgOnInit를 구현해야하고이되고 새 테이블을 처리하기 위해거야 selectedTable 당신은 NgOnChanges을 구현하고 selectedTable을보고해야합니다 변하기 쉬운.