angular 6 change detection - ngOnChanges not firing for a deep nested object

Question

I am having an object as below

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

I need to detect the change every time the value changes using ngOnchanges event of Angular 6.

it seems the angular ngOnchanges doesn't detect the deeply nested object.I have tried different things like

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

Nothing is working, any help would be appreciated :)

as mentioned in that post second answer tried this this.chartData = Object.assign({}, result.data); ,but not working — Ram, Jul 01 '19 at 08:34

score 0 · Accepted Answer · answered Jul 01 '19 at 08:34

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

this doesn't clone the whole object, it only changes the top-root object, so for example if you have an object like this

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

and you use assign

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

the car object will be new, but the wheel object will be the same, and car and anotherCar will reference to the same object, sou you have to make deep clone, the easiest way right now is using JSON methods

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

score 0 · Answer 2 · answered Jul 01 '19 at 08:34

0

A quick note about Object.assign() and {...obj} object copying: both of them make a shallow copy of an object meaning that only own top-level properties will be copied.

An example:

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

The code above shows that nested objects will not be cloned. To make your code work correctly make a deep clone manually: {...a, b: {...source.b}} or use lodash's _.cloneDeep(source)

answered Jul 01 '19 at 08:34

Yevhenii Dovhaniuk

1,073
5
11

Alternatively if you don't want to use lodash you can do: `JSON.parse(JSON.stringify(obj))` to deep clone an object. Obviously this will not handle circular references. – Mathyn Jul 01 '19 at 08:48
1

Although `JSON.parse(JSON.stringify(obj))` will do the work for simple objects, it's not a very good approach: - it's not idempotent meaning that each subsequent call may return a different output (key order in object is not yet guaranteed); - deep clone is way more faster; - parse/stringify combo will omit functions; - NaN/Inifnity/undefined values will also be omitted; – Yevhenii Dovhaniuk Jul 01 '19 at 09:12

angular 6 change detection - ngOnChanges not firing for a deep nested object

2 Answers2