Angular 2 — обновление ngModel

У меня есть список таблиц. Когда пользователь нажимает на таблицу, происходит следующее:

(click)="selectedTable=table"

И появляется новая форма, которая позволяет редактировать файл selectedTable. Форма содержит следующие входные данные:

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

И кнопка для обновления изменений..

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

и кнопка отмены: Отмена

Моя проблема

Когда я обновляю свой ввод, список таблиц (интерфейс) также меняется в соответствии с тем, что находится на вводе. Но когда я изменяю свой ввод, а затем нажимаю "Отмена", в интерфейсах отображается список таблиц с обновленной таблицей, которая обновляется только в интерфейсе, а не на стороне моего сервера (поскольку я не нажимал кнопку "Обновить"). ).

Как я могу отменить изменения, внесенные в selectedTable при нажатии кнопки «Отмена»?

Или другими словами: как я могу изменить свою таблицу с помощью ввода и обновить ее в интерфейсе только после нажатия кнопки «Обновить»?


angular angular-forms
person TheUnreal    schedule 01.11.2016    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Чтобы обновлять только при нажатии кнопки «Обновить», вам необходимо хранить любые измененные значения отдельно от неизмененной версии. В этом случае это означает, что вам нужно будет привязать [(ngModel)]="newTable.name" или что-то подобное, тогда только при запуске функции обновления вы назначите selectedTable = newTable.

Причина, по которой это требуется, заключается в том, что двусторонняя привязка представляет собой механизм обновления почти в реальном времени. Любое изменение, внесенное в ваш ввод, немедленно отражается в вашем [(ngModel)].

Чтобы работать правильно, вам нужно реализовать NgOnInit, чтобы присвоить модели значения вашего selectedTable, а затем, чтобы обработать новую таблицу, ставшую selectedTable, вам нужно реализовать NgOnChanges и наблюдать за переменной selectedTable.

person gelliott181    schedule 01.11.2016
comment
Я пробовал это, но тогда selectedTable name (текущее значение) не отображается на входе. Я попробовал [(ngModel)]="newTable.name" [value]="selectedTable.name", но он работает с ошибками, при первом нажатии не отображается имя, только второе, не знаю почему. - person TheUnreal; 01.11.2016
comment
Здесь вступают в действие хуки NgInit и NgOnChanges. В NgInit вы назначите модели выбранную таблицу, а в NgOnChanges вы обновите модель выбранной таблицей при изменении ссылки на selectedTable. См. angular.io/docs/ts/latest/guide/lifecycle-hooks. .html, чтобы узнать больше о крючках жизненного цикла. - person gelliott181; 01.11.2016