Angular 2 - Variable defined in Service, not updating in view

Question

Good day folks, I have this crazy idea to use service as cache store. so I have defined few variables in Service. The data is updated all right in service but changes not reflected on view. View gets already populated and service layer runs afterward. I am not sure, even if it is a good idea to store data in service? can some one shed light on it please. here is my service code:

categories :  SelectItem[]=[];

constructor(private utilityService:UtilityService) {

}

//populate all drop downs array with initial data from db
 populateAll() {
//get categories
this.getCategories();
//there are lot more calls here
}
private getCategories() {
 if(this.categories.length==0){
   this.utilityService.getAllCategories().subscribe(cat=>{
   this.categories = 
   this.utilityService.getSelectItemPublished(cat,"Category");
  })
  }
 }

This is how I call it in component

constructor(
          private cache:CacheStoreService,

         ) { }

ngAfterViewInit()
{
this.categories=this.cache.categories;
this.depts=this.cache.depts;
this.focuses=this.cache.depts;
this.statuses=this.cache.statuses;
this.phases=this.cache.statuses;
this.visibilities=this.cache.visibilities;

}
ngOnInit() {
   this.cache.populateAll();

Appreciate your help. One more question: How can I update the service varaibles, when new data is added in db-update the cache. **I know, i can return observable and subscribe to it in component. I am looking another way. Not sure, if it is do able? **

Thank you

It's hard to tell with the given code but in your subscribe block in the component your on next callback looks like it's calling another function. Are you napping your results properly there? If that function returns another observable, you could use the async pipe in your template. As far as your second question, I believe you would need some sort of real-time database solution. — jonc.js
– jonc.js, Commented Apr 15, 2017 at 15:48
I know, i can make a return observable and subscribe to it in component. I am looking another way. Not sure, if it is do able? — leo
– leo, Commented Apr 15, 2017 at 15:51

JB Nizet · Accepted Answer · 2017-04-15 16:01:53Z

4

Here is what happens:

The service is initialized, and its categories is an empty array
You tell the service to fetch data, by calling this.cache.populateAll()
The service method sends an asynchronous request
The component stores a reference to the service's categories array in its own categories. The array is still empty
Long after, the response to the asynchronous request comes back. The callback is called. It doesn't populate the array referenced by the service and the component. Instead, it assigns a new array to the service's categories field. The component still references the old, empty array.

There are several ways to fix that.

The first way would be to avoid replacing the array by another one, but instead to fill the original array.

The second way would be to always request the array from the service, instead of storing a second reference in the component:

get categories() {
  return this.cache.categories;
}

The third way would be to emit an event from an observable in the service, that the component would subscribe to to obtain the new categories.

answered Apr 15, 2017 at 16:01

JB Nizet

694k94 gold badges1.3k silver badges1.3k bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

leo Over a year ago

Thank you very much @JB Nizet. Grateful. Now could you answer other question please. How can I fill/push the service array with new data. Suppose new category from addCategory Component.

JB Nizet Over a year ago

Well, add an addCategory(category) method to your service, which does this.categories.push(category)?

leo Over a year ago

but category is added from other service i.e. CategoryService. I would like to send an object to cache Service...

Collectives™ on Stack Overflow

Angular 2 - Variable defined in Service, not updating in view

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related