angular - Angular 2 - 更新 ngModel

Question

我有一个表格列表。当用户单击表格时，会发生这种情况：

(click)="selectedTable=table"

并且出现了一个允许编辑selectedTable. 该表单包含以下输入：

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

还有一个更新更改的按钮..

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

和一个取消按钮：取消

我的问题

当我更新我的输入时，表格列表（界面）也会根据输入中的内容发生变化。但是当我更改输入然后单击“取消”时，界面会显示带有更新表格的表格列表，该表格仅在界面中更新，而不在我的服务器端更新（因为我没有单击更新）。

selectedTable单击取消时如何恢复对 的更改？

或者换句话说：如何通过输入更改我的表格并仅在单击更新后在界面中更新它？

Answer 1

为了仅在单击更新时更新，您需要将任何修改的值与未修改的版本分开存储。在这种情况下，这意味着您需要绑定[(ngModel)]="newTable.name"或类似的东西，然后只有当更新功能运行时，您才会分配selectedTable = newTable.

之所以需要这样做是因为双向绑定是一种近乎实时的更新机制。对您的输入所做的任何更改都会立即反映在您的[(ngModel)].

为了正常工作，您需要实现NgOnInit为模型分配您的值selectedTable，然后为了处理一个新表，selectedTable您需要实现NgOnChanges并观察selectedTable变量。