角度 6 变化检测 - ngOnChanges 不会为深层嵌套对象触发答案

【问题标题】：angular 6 change detection - ngOnChanges not firing for a deep nested object角度 6 变化检测 - ngOnChanges 不会为深层嵌套对象触发
【发布时间】：2019-07-01 08:17:22
【问题描述】：

我有一个对象如下

result =   [{
        "name": "jmd",
        "children": [
          {
            "name": "ppp1",
            "children": [
              {
                "name": "feeder",
                "children": [
                  {
                    "name": "rmu1",
                    "children": [
                      {
                        "name": "IT1",
                        "children": [
                          {
                            "aname": "Asset123",
                            "value" : "233"   
                          }
                        ]
                      }
                    ]
                  }
                ]
              }
            ]
          }]

每次使用Angular 6 的ngOnchanges 事件更改值时，我都需要检测更改。

似乎有角度的ngOnchanges 没有检测到深度嵌套的对象。我尝试了不同的东西，比如

this.chartData = Object.assign({}, result);
this.chartData = {...result};

没有任何效果，任何帮助将不胜感激:)

【问题讨论】：

为什么最后一个值中有***？。
我想让它更大胆:) .
你试过stackoverflow.com/a/34799257/3918612吗？
如帖子中提到的第二个答案尝试了 this.chartData = Object.assign({}, result.data); ，但不工作

标签： javascript angular angular6

【解决方案1】：

this.chartData = Object.assign({}, result);
this.chartData = {...result};

这不会克隆整个对象，它只会更改顶层对象，例如如果你有这样的对象

var car = {
 model :"bmw",
 wheel:{
  type:"rounded",
  color:"black"
 }
}

你使用assign

let anotherCar = {...car} //or Object.assign it's almost same)

car 对象是新的，但是 wheel 对象是一样的，car 和 anotherCar 会引用同一个对象，所以你必须进行深度克隆，目前最简单的方法是使用 JSON 方法

var newCar = JSON.parse(JSON.stringify(car)); // it will create whole new object

【讨论】：

【解决方案2】：

关于Object.assign() 和{...obj} 对象复制的简要说明：他们都制作了对象的浅层副本，这意味着只会复制自己的顶级属性。

一个例子：

const obj = {a: 5};
const withNested = {b: 4, nested: obj};

const copy = {...withNested};

copy.nested === withNested.nested // outputs 'true' meaning the objects are the same and have not been copied

上面的代码显示嵌套对象不会被克隆。要使您的代码正常工作，请手动进行深度克隆：{...a, b: {...source.b}} 或使用lodash 的_.cloneDeep(source)

【讨论】：

如果你不想使用 lodash，你可以这样做：JSON.parse(JSON.stringify(obj)) 来深度克隆一个对象。显然这不会处理循环引用。
虽然JSON.parse(JSON.stringify(obj)) 可以处理简单的对象，但这不是一个很好的方法： - 这不是幂等的，这意味着每个后续调用都可能返回不同的输出（对象中的键顺序尚未得到保证); - 深度克隆更快； - 解析/字符串化组合将省略函数； - NaN/Inifnity/undefined 值也将被省略；