如何确定数组中的哪些对象已被用户更改答案

【问题标题】：How to determine which objects in array have been changed by user如何确定数组中的哪些对象已被用户更改
【发布时间】：2018-06-25 23:41:37
【问题描述】：

我已经被这个问题困扰了一段时间。我的应用程序中有一个数据表，用户可以为表中的每条记录修改一些字段。

然后用户可以单击一个按钮并保存所有更改，这些更改将触发对数据库的查询以更新记录。我不想传递表中的每条记录（数据只是一个数组），我只想传递已修改的记录。

例如：原玩家[0]：

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

用户修改后：

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

理想情况下，我只想发送已修改的一条记录或 n 条记录。我已经看到了这个解决方案Angular update object in object array，但它似乎适用于 NgClass、NgStyle 等。

不胜感激。

【问题讨论】：

使用 Angular 表单时，您应该能够监控每个输入的脏度，这有助于确定哪些字段已被更改。
@HarryNinh 我没有使用表单，它只是一个简单的输入字段。关于脏度，我也想到了这一点，但它可能不会完全有帮助，因为有人可能会更改数据，然后将其改回原来的样子，它仍然会被标记为脏，对吧？

标签： javascript arrays angular rxjs angular5

【解决方案1】：

您可以使用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 将区分重复对象。

【讨论】：

谢谢你的回答让我知道我必须做什么

【解决方案2】：

好吧，我想通了，不确定这是否是最佳解决方案。它虽然有效。我为此使用了 lodash。基本上，这个想法是创建一个数组，它是您尝试跟踪更改的区域的原始副本，然后将原始数组与用户能够更改数据的当前数组进行比较，然后找出差异。

例子：

原始用户：

[
  {"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>

假设用户将 John Smith 上的 firstName 更改为 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() 的预期输出将只给出用户数组中已更改的用户对象，因此在这种情况下，输出将是：

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

请记住，当您将数组作为参数传递给方法时，_differenceWith 的顺序很重要。您希望将跟踪的数组作为第一个参数，将数组的原始副本作为第二个参数。

希望这对将来的任何人都有帮助。

【讨论】：