Service constant property


#1

Hi there,

I’m having trouble with a property of one of my service that is getting updated when i dont want to.

I explain myself.

When I open the home view i’m making a GET request that is returning my data. The data is then stored in my service like this.

home.ts

this.currentEdlService.setRoomTypes(this.roomTypes);

currentEdl.service.ts

setRoomTypes(roomTypes) {
        this.roomTypes = roomTypes;
    }

Everything is fine at this point. But later in the app i use the data of roomTypes to create a list of room types that the user can select. In my file “inspection.ts” I have a property “roomTypes” that is set to my service property like this:

inspection.ts

this.roomTypes = this.currentEdlService.getRoomTypes();

I use these roomTypes to create a list in a Popover like this:

  showTypeList(event) {
        console.log(event);
        let popover = this.popOverCtrl.create(TypeListPage, { roomTypes: this.roomTypes });
        console.dir(this.roomTypes);
        popover.present();
        popover.onDidDismiss((popoverData) => {
            if (popoverData) {
                this.selectedPiece.title = popoverData.description;
                this.selectedPiece.typeDefined = true;
                this.selectedPiece.parametres = popoverData.parameters;
                this.currentEdlService.updatePiece(this.selectedPiece);
                this.parameters = this.selectedPiece.parametres;
                console.dir(this.selectedPiece);
            }
        })
    }

As you can see i save informations contained in my popoverData in some properties of my object “selectedPiece”.

But that’s the probleme now, my object roomTypes is also modified each time i change something in “selectedPiece” and the changes are reported in my original object in currentEdlService. Which I don’t want to.

roomTypes are supposed to be constant and never been updated.

Am I missing something ? Because I really can’t figure it out. Hope someone can help me on this one. Important to notice is that i never use my function setRoomTypes() in another component.

popOver page

import { Component } from '@angular/core';
import { ViewController, NavParams } from 'ionic-angular';
@Component({
    template: `
    <ion-list>
      <ion-list-header>Type de pièces</ion-list-header>
      <button *ngFor="let type of typesPiece.roomTypes" ion-item (click)="close(type)">{{type.description}}</button>
    </ion-list>
  `
})
export class TypeListPage {

    typesPiece: any;
    typeSelected: any;

    constructor(public viewCtrl: ViewController, public params: NavParams) {
        this.typesPiece = this.params.get('roomTypes');
    }

    close(type) {
        this.typeSelected = type;
        this.viewCtrl.dismiss(this.typeSelected);
    }
}

#2

Well this was a “basic” object reference error. The most obvious is sometimes so hard to see.

Find the answer here: https://stackoverflow.com/questions/33043850/why-and-when-to-use-angular-copy-deep-copy

Without deep copy or using angular.copy, changing value of property or adding any new property update all object referencing that same object.

What I needed is create a deep copy of my object contained in my service. Which i managed to do this way:

this.roomTypes = JSON.parse(JSON.stringify(this.currentEdlService.getRoomTypes()));