Angular *ngFor 项目更改答案

【问题标题】：Angular *ngFor item changesAngular *ngFor 项目更改
【发布时间】：2018-02-27 14:32:19
【问题描述】：

我在另一个 *ngFor 中有一个 *ngFor。当另一个 *ngFor 中使用的对象发生更改时，就会出现问题。假设这是我们的数据：

const data = [
  {
    id: 1,
    name: 'First parent',
    children: [
      {id: 1, name: 'child1', val: ['1', '2']},
      {id: 2, name: 'child2', val: ['3', '4']}
    ]
  },
  {
    id: 2,
    name: 'Second parent',
    children: [
      {id: 3, name: 'child3', val: ['5', '6']},
      {id: 4, name: 'child4', val: ['7', '8']}
    ]
  }
];

现在，像这样显示这些数据：

<div *ngFor="let parent of data">
  <h3>{{parent.name}}</h3>
  <div *ngFor="let child of parent.children">
    <div (click)="childClicked(parent, child)">
      <span>Name: {{child.name}}</span>
      <span>Value: {{child.val}}</span>
    </div>
  </div>
</div>

childClicked：

const newData = [
  {
    id: 1,
    name: 'Some parent',
    children: []
  }
];


function childClicked(parent, child) {
  const newParent = newData.filter(p => p.id === parent.id)[0];
  if (newParent.children.filter(c => c.id === child.id).length === 0) {
    newParent.children.push(child);
    newParent.children[0].val = [];
  }
}

注意！这是一个和我的代码类似的模型，但是代码太多，获取数据的请求很少，所以这样描述问题更容易。

现在，当将子级添加到其新父级时，子级在 HTML 中的值会发生变化。添加时，我们写“newParent.children[0].val = [];”，因为孩子之前的值只存在于旧的父项中。

如何让 HTML 仍然显示旧值（child.val）？

【问题讨论】：

标签： angular

【解决方案1】：

你需要选择。要么两个父母共享完全相同的孩子，并且修改一个修改另一个（因为它是完全相同的孩子），或者新的父母包含一个新的孩子，其状态类似于第一个的状态，除了它有一个vals 的空数组。

您的代码正在使用第一个选项，但显然您想要第二个选项。所以你需要制作一个孩子的（部分）副本：

if (newParent.children.filter(c => c.id === child.id).length === 0) {
  val newChild = {
    id: child.id,
    name: child.name,
    val: []
  };
  newParent.children.push(newChild);
}

【讨论】：

【解决方案2】：

通过制作

newParent.children.push(child);

你是通过引用而不是值来复制旧的孩子。它不是新的孩子，而是对老孩子的参考。当你制作时：

newParent.children[0].val = [];

你也在删除旧孩子的价值观。

如果你想保留这些，并且你想创建新的不同的孩子，你应该创建一个新的对象，就像 Object.assign 一样：

let newChildren = Object.assign({}, child);
newParent.children.push(newChildren);
newParent.children[0].val = [];

【讨论】：