Clone object and update view

Question

I have a simple service to update an object. I deep clone the initial object and update the clone one.

As you can see, it works well, but the view is not updated. How can I do to update the view on changes ?

Here is the code : https://stackblitz.com/edit/angular-eh4cds?file=app%2Fapp.component.ts

And another question, how can I do to modify the value of number.three passing the path to function like : "number.three" ? : Answer here : https://stackoverflow.com/a/8817473/5627096

AppComponent

import { Component, OnInit } from '@angular/core';

import { ObjectService } from './object.service';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit {

  private object: any;

  constructor (private objectService: ObjectService) {}

  ngOnInit () {
    this.object = this.objectService.getObject();
  }  

  changeObject () {
    this.objectService.changeObject('two', 'I\'m the one you need')
  }
}

ObjectService

import { Injectable } from '@angular/core';

@Injectable()
export class ObjectService {
    public object = {
      one: 'One',
      two: 'Two',
      number: {
        three: 'Three'
      }
    }

    public getObject () {
      return this.object;
    }

    public changeObject (path: string, value: any) {
      console.log('initial', this.object, path, value);
      let clone = { ...this.object, [path]: value };
      console.log('clone', clone);
      return this.object;
    }
}

View

{{ object.one }}
<br>
{{ object.two }}
<br>
{{ object.number.three }}
<br>

<button (click)="changeObject()">Change object</button>

you can use `Object.assign()` to deep clone your object – Aravind Feb 18 '18 at 11:47 — Aravind, Feb 18 '18 at 11:47
Yes I know, but you will get the same problem. – Swarovski Feb 18 '18 at 11:49 — Swarovski, Feb 18 '18 at 11:49

score 1 · Accepted Answer · answered Feb 18 '18 at 11:50

1

You need to assign the returned value inside the changeObject

  changeObject () {
    this.object =  this.objectService.changeObject('two', 'I\'m the one you need');

  }

Also i think you need to return cloned one instead of object

   public changeObject (path: string, value: any) {
      console.log('initial', this.object, path, value);
      let clone = { ...this.object, [path]: value };
      console.log('clone', clone);
      return clone;
    }

STACBKLITZ DEMO

answered Feb 18 '18 at 11:50

Sajeetharan

216,225
63
350
396

Yes, great, it's working. (you forgot to update the stackblitz). And about my second question ? – Swarovski Feb 18 '18 at 11:56
That's ok, I've found my answer here : https://stackoverflow.com/a/8817473/5627096 – Swarovski Feb 18 '18 at 12:01

Clone object and update view

1 Answers1