Как определить, какие объекты в массиве были изменены пользователем

Я какое-то время застрял в этой проблеме. У меня есть таблица данных в моем приложении, и есть несколько полей, которые пользователь может изменить для каждой записи в таблице.

Затем пользователь может нажать кнопку и сохранить все изменения, которые вызовут запрос к базе данных для обновления записей. Вместо того, чтобы передавать каждую запись в моей таблице (данные представляют собой просто массив), я хочу просто передать записи, которые были изменены.

Например: Оригинальные игроки [0]:

{ "name": "player 1", "joinDate": "06/25/2018", "ppg": "28.5" }

После того, как пользователь изменит его:

{ "name": "player 1", "joinDate": "06/25/2018", "ppg": "30.9" }

В идеале я просто хочу отправить эту одну запись или количество записей, которые были изменены. Я видел это решение Угловой объект обновления в массиве объектов, но похоже, что оно предназначено для NgClass, NgStyle и т. д.

Был бы признателен за помощь.

при использовании формы Angular вы должны иметь возможность отслеживать грязность каждого ввода, что помогает определить, какие поля были изменены.

Harry Ninh 26.06.2018 01:49

@HarryNinh Я не использую форму, это просто поле ввода. Кроме того, что касается грязности, я тоже подумал об этом, но это может быть не полностью полезно, потому что кто-то может изменить данные, а затем вернуть их к исходным, и они все равно будут помечены как грязные, верно?

Nabz 26.06.2018 02:00
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
2
85
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Вы можете использовать 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 будет отличать повторяющийся объект.

result

спасибо, ваш ответ дал мне представление о том, что мне нужно было сделать

Nabz 28.06.2018 15:21
Ответ принят как подходящий

Хорошо, я понял это, не уверен, что это лучшее решение. Но это сработало. Я использовал для этого 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, когда вы передаете массивы в качестве аргументов методу. Вы хотите сохранить отслеживаемый массив в качестве первого аргумента, а исходную копию массива - в качестве второго аргумента.

Надеюсь, это поможет кому-нибудь в будущем.

Другие вопросы по теме