Changes made in .subscribe() method not reflected out of it or in the template

Question

I am using a Subject to add edit functionality to a basic phonebook app. The changes that I make to component class variables inside of the subscribe callback are not reflected out of it or in the template.

I have tried the solutions listed in the answers to the following question: Angular 2 View will not update after variable change in subscribe

in service.ts:

startedEditing= new Subject<number>();

in details.component.ts(where the data is passed on fu):

onEdit(){
    this.contactsService.startedEditing.next(this.id);
  }

in edit-component.ts(in ngOnInit):

this.subscription=this.contactsService.startedEditing.subscribe(
      (index:number)=>{
        this.editMode=true; 
        this.editedItemIndex=index;
        this.editItem=this.contactsService.getContact(this.editedItemIndex);         
          this.editForm.setValue({
            address:this.editItem.address,
            name: this.editItem.name,
            phone:this.editItem.phone,
            profession:this.editItem.profession
          });
          console.log("in subscribe: "+this.editedItemIndex);

      }
    );
    console.log("out of it :" + this.editedItemIndex);
  }

output on the console:

in subscribe: 0
out of it : undefined

expected result:

in subscribe: 0
out of it :0

What is the signature of `this.contactsService.getContact` – May 27 '19 at 09:19 — , May 27 '19 at 09:19

score 0 · Answer 1 · answered May 27 '19 at 09:23

The console.log("out of it :") will run only when your component is initialized, and at this moment this.editedItemIndex is undefined because startedEditing didn't change so the line this.editedItemIndex=index has not been triggered.

It's asynchronous ! If you do a startedEditing.subscribe() it's because you are waiting something (Ex: a value). If you try to get the value outside the subscribe, it will not wait for the value and will show undefined.

And if you try your code, the real output should be :

out of it : undefined
in subcribe : 0

How do I work around that problem as my form values aren't set up on the template? — Simran Makhija, May 28 '19 at 06:14

score 0 · Answer 2 · answered May 27 '19 at 09:24

It is normal that this.editedItemIndex is undefined in console.log("out of it :" + this.editedItemIndex); The code above this part is asynchronous so when console.log("out of it :" + this.editedItemIndex); is run, the code inside the subscribe is not yet executed and this.editedItemIndex is not yet initialized. Now the ngOnInit is the first method that is called in your component so in the other methods or in the template, this.editedItemIndex should be already initialized and not undefined. may be you can share your html code or the other places where it is undefined so the answer can be more precise.

Changes made in .subscribe() method not reflected out of it or in the template

2 Answers2