Как определить, какие объекты в массиве были изменены пользователем - PullRequest
0 голосов
/ 26 июня 2018

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

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

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

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

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

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

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

Буду признателен за помощь.

Ответы [ 2 ]

0 голосов
/ 28 июня 2018

Хорошо, я понял, не уверен, что это лучшее решение.Это работало все же.Я использовал 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" },
]

Typescript (ваш компонент):

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 () даст только объекты пользователя внутриизмененный массив пользователей, поэтому в этом случае выходные данные будут такими:

changeUsers = [{"firstName": "John", "lastName": "Doe"}]

Сохранить впомните, что порядок имеет значение для _differenceWith, когда вы передаете массивы в качестве аргументов методу.Вы хотите сохранить массив для отслеживания в качестве первого аргумента и исходную копию массива в качестве второго аргумента.

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

0 голосов
/ 26 июня 2018

Вы можете использовать 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}}

Результат: только изменение только для *Только 1011 * и Salah, если вы измените Kean снова, Set in Javascript будет отличать дублирующийся объект.

result

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...