如何确定用户更改了数组中的哪些对象

Question

我在这个问题上停留了一段时间。我的应用程序中有一个数据表，用户可以为表中的每个记录修改一些字段。

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

例如： 原始玩家[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等。

不胜感激。

Answer 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将与重复对象区分开。

Answer 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上的名字更改为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很重要。您希望将跟踪数组作为第一个参数，并将数组的原始副本作为第二个参数。

希望这对以后的所有人都有帮助。