Я какое-то время застрял в этой проблеме. У меня есть таблица данных в моем приложении, и есть несколько полей, которые пользователь может изменить для каждой записи в таблице.
Затем пользователь может нажать кнопку и сохранить все изменения, которые вызовут запрос к базе данных для обновления записей. Вместо того, чтобы передавать каждую запись в моей таблице (данные представляют собой просто массив), я хочу просто передать записи, которые были изменены.
Например: Оригинальные игроки [0]:
{ "name": "player 1", "joinDate": "06/25/2018", "ppg": "28.5" }
После того, как пользователь изменит его:
{ "name": "player 1", "joinDate": "06/25/2018", "ppg": "30.9" }
В идеале я просто хочу отправить эту одну запись или количество записей, которые были изменены. Я видел это решение Угловой объект обновления в массиве объектов, но похоже, что оно предназначено для NgClass, NgStyle и т. д.
Был бы признателен за помощь.
@HarryNinh Я не использую форму, это просто поле ввода. Кроме того, что касается грязности, я тоже подумал об этом, но это может быть не полностью полезно, потому что кто-то может изменить данные, а затем вернуть их к исходным, и они все равно будут помечены как грязные, верно?



![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)


Вы можете использовать Set in Javascript для хранения изменений, внесенных пользователем.
export class AppComponent {
data = [
{ name: 'Kean', age: 24 },
{ name: 'Messi', age: 31 },
{ name: 'Salah', age: 23 },
{ name: 'Ronaldo', age: 33 },
]
yourChanges = new Set();
yourArr = [];
change(item) {
this.yourChanges.add(item);
this.yourArr = Array.from(this.yourChanges);
}
}
<table>
<tr *ngFor = "let item of data">
<td>
<input (change) = "change(item)" [(ngModel)] = "item.name">
</td>
<td>
<input (change) = "change(item)" [(ngModel)] = "item.age">
</td>
</tr>
</table>
{{yourArr| json}}
Результат: просто измените только для Kean и Salah, если вы снова измените Kean, Set in Javascript будет отличать повторяющийся объект.

спасибо, ваш ответ дал мне представление о том, что мне нужно было сделать
Хорошо, я понял это, не уверен, что это лучшее решение. Но это сработало. Я использовал для этого lodash. По сути, идея состоит в том, чтобы создать массив, который является исходной копией области, которую вы пытаетесь отслеживать на предмет изменений, а затем сравнить исходный массив с текущим массивом, с помощью которого пользователь может изменить данные, а затем найти разницу.
Пример:
originalUsers:
[
{"firstName": "John", "lastName": "Smith" },
{ "firstName": "Jane", "lastName": "Smith" },
]
HTML:
<your_respective_table *ngFor = "let user of users">
<input type = "text" [(ngModel)] = "user.lastName">
</your_respective_table>
Допустим, пользователь меняет firstName на John Smith на John Doe.
UsersArray будет выглядеть так:
[
{"firstName": "John", "lastName": "Doe" },
{ "firstName": "Jane", "lastName": "Smith" },
]
Машинопись (ваш компонент):
import { cloneDeep as _cloneDeep, differenceWith as _differenceWith, isEqual as _isEqual } from 'lodash';
.... // Component declaration
....
// where ever your getting or subscribing to your array after when the stream is complete
this.originalUsers = _cloneDeep(this.users);
...
...
getChanges() {
let changedUsers = [];
changedUsers = _differenceWith(this.users, this.originalUsers, _isEqual);
}
Ожидаемый результат getChanges () предоставит только те пользовательские объекты внутри массива users, которые изменились, поэтому в этом случае результат будет следующим:
changedUsers = [{"firstName": "John", "lastName": "Doe"}]
Помните, что порядок имеет значение для _differenceWith, когда вы передаете массивы в качестве аргументов методу. Вы хотите сохранить отслеживаемый массив в качестве первого аргумента, а исходную копию массива - в качестве второго аргумента.
Надеюсь, это поможет кому-нибудь в будущем.
при использовании формы Angular вы должны иметь возможность отслеживать грязность каждого ввода, что помогает определить, какие поля были изменены.