угловое обнаружение 6 изменений - ngOnChanges не стреляет для глубоко вложенного объекта

Question

У меня есть объект, как показано ниже

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

Мне нужно обнаруживать изменение каждый раз, когда значение изменяется, используя ngOnchanges событие Angular 6.

, кажется угловымngOnchanges не обнаруживает глубоко вложенный объект. Я пробовал разные вещи, такие как

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

Ничего не работает, любая помощь будет оценена :))

Answer 1

Краткое примечание о копировании объектов 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 s _.cloneDeep(source)

Answer 2

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