1

I'm using Angular 13 and ngrx/data, store and entity (v.13). I have set up my ngrx/data service

export class MyObjService extends DefaultDataService<MyObject> {
    ...
}

and then a component using PrimeNg. I have a table to display all my objects ...

<p-table #dt [value]="(myObjects$ | async)!" ...

In which the service file contains

  constructor(
    ...
    private service: MyObjService,
  ) { 
      ...
      this.myObjects$ = this.service.getAll();

The issue is every time I do an operation that alters the backend store, for example a delete

  del(id: number){
    this.myObjService.delete(id)
    .subscribe(_ => {
      this.MyObjects$ = this.myObjService.getAll();
    } );

I have to refresh the table (I have to call "this.myObjects$ = this.myObjService.getAll();" above). Is there a way I can set the table so that the data in the table refreshes automatically? I feel like this is something ngrx/data would allow me to do but not sure how it is done.

Dave
  • 15,639
  • 133
  • 442
  • 830
  • 1
    I'm not sure what getAll does(whether its returning selector) and what delete(id) does, but delete(id) method should dispatch an action to a store and in a response to that action state in a store should be mutated(and as a side effect there should request made to a backend). If state is correctly mutated then if you have selector that returns that state it should automatically emit new event with new state. There shouldn't be any need to do getAll in a subscribe to delete(id). – Dariusz Ostolski Aug 14 '22 at 15:53
  • can you show getAll() function? and what is happening in MyObjService? Please update your question with sequential functio/service calls so that it can tracable – Pradeep Yenkuwale Aug 15 '22 at 15:12
  • Do your `p-table` got pagination or filter? – paranaaan Aug 16 '22 at 08:14
  • @PradeepYenkuwale and DariuszOstolski, not sure if you've worked with NgRx data service before (I'm relatively new) but getAll is automatically generated -- https://v8.ngrx.io/guide/data/entity-dataservice . – Dave Aug 17 '22 at 19:23
  • @paranaaan, no there is no filter. I have added pagination but I'm only working with 2-3 results so pagination wouldn't be kicking in yet. – Dave Aug 17 '22 at 19:23
  • @Dave then you should use https://v8.ngrx.io/guide/data/entity-collection-service in your component not entity-dataservice, entity-dataservice is a service to make an API call to a server not to expose entities to components. – Dariusz Ostolski Aug 17 '22 at 20:16
  • Thanks @DariuszOstolski. I see that EntityCollectionService is an interface. I'm confused how this would work. If I need to override one of the standard getAll, getById, etc. methods how would I go about doing that? – Dave Aug 18 '22 at 21:24
  • @Dave Normally it is created by EntityCollectionServiceFactory, if you need to override any of methods you just derive from EntityCollectionServiceBase, look please at https://github.com/johnpapa/angular-ngrx-data/blob/master/src/app/heroes/heroes.service.ts, currently I'm on vacation in Albania with limited internet access, I can provide a stack blitz after I'll come back. – Dariusz Ostolski Aug 21 '22 at 17:11

1 Answers1

1

First you can add a method to your service for listening an event: let's assume you have an object which contains your table data. let's say Category is an object with id,name and all data fields. Then you can import Subject from rxjs which is an observable. in your service.ts file :

 export class CategoriesService {
  private categories:Category[] = [];
  private categoryUpdated = new Subject<Category[]>();

then you can add a method as middleware:

 getUpdateListener(){
    return this.categoryUpdated.asObservable();
  }

then go to your category.ts file : import Subscription from rxjs and store it in a variable.

export class CategoriesComponent implements OnInit{
categories : Category[] = [];
category : Category; 
private categorySub : Subscription;

then the constructor :

constructor(private _categoriesService : CategoriesService){}

in ngOnInit first we get the Category from the service file. Like you are getting the datas. Then we execute our observation in subscription.And we set the object value through it.

ngOnInit(){
    this._categoriesService.getCategories();
    this.categorySub = this._categoriesService.getUpdateListener().subscribe((cate: Category[])=>{
      this.categories = cate;
    }) 
  }

then you don't need to use other observable anymore it will handle everything.

debugger
  • 1,442
  • 1
  • 9
  • 14
  • Does the ngrx/data or ngrx/entites packages do any of this out of the box? I thought I read that one of those woudl provide a store that would be updated whenever the standard add, update, delete methods were called and I could just reference that store in my table. – Dave Aug 18 '22 at 21:26