Question

说明：子组件方法是使用array of objects作为参数从父组件调用的。在子组件中，将此array分配给变量。

父组件：

let obj = [{
             'prop1': 'value1',
             'prop2': 'value2'
           },{
             'prop1': 'value1',
             'prop2': 'value2'
           }];

this.child.sendObject(obj);

子组件：

public sendObject(obj) : void {
   this.updatedObj = obj;
}

问题陈述：

从父组件传递的对象的属性可以更新并发送到子组件。

父组件：

  let obj = [{
         'prop1': 'value4',
         'prop2': 'value2'
       },{
         'prop1': 'value1',
         'prop2': 'value7'
       }];

  this.child.sendObject(obj);

可以在obj数组的子组件本身中添加新对象。

子组件：

  public sendObject(obj) : void {
     this.updatedObj = obj;
  }

  public addNewObj() {
     this.updatedObj.push({
       'prop3': 'value3',
       'prop4': 'value4 
     })
  }

我想用此更新的对象来验证（检查是否相等）先前发送的对象。

到目前为止我尝试过什么？

子组件：

public sendObject(obj) : void {
    const copy = JSON.parse(JSON.stringify(obj));
    this.updatedObj = obj;

    if (JSON.stringify(this.updatedObj) === JSON.stringify(copy)) {
       console.log("Not changed");
    } else {
       console.log("Changed");
    }
}

如果从父对象修改了对象属性，但是如果我在子组件中的现有数组（this.updatedObj）中添加了任何新对象并从父对象切换回子对象，则上述逻辑工作正常。它会中断并仅显示从父级传递的对象。

Answer 1

只有一个组件应该是数组的“所有者”。在您的情况下，看起来家长应该对此负责。然后，子组件不应直接将数据推入数组，而应将其要添加的数据发送到其输出事件，而父组件应将这些数据推入数组。

Answer 2

您使用JSON.stringify的解决方案非常脆弱，因为没有任何对象内部键顺序的保证。这些对象是相同的，但比较将失败：

让obj1 = { 'prop1'：'value1'， 'prop2'：'value2' };

让obj2 = { 'prop2'：'value2'， 'prop1'：'value1' };

您可以在对每个对象键进行字符串化之前对它们进行递归排序，但是由于排序和字符串化，它会很慢。

您可以从Lodash（https://lodash.com/docs#isEqual）或Underscore（https://underscorejs.org/#isEqual）之类的库中使用“深度等于”功能。

如果您想构建自己的比较功能，请查看以下问题的答案：Object comparison in JavaScript

如何验证两个对象数组

2 个答案: