how to subscribe to an Observable returned from ngrx's Entity Data Service

Question

i have a service called TransactionEntityService derived from EntityCollectionServiceBase for a model called Transaction.

export class TransactionEntityService
extends EntityCollectionServiceBase<Transaction> {

I am using TransactionDataService to override default behavior of DefaultDataService . In AppModule TransactionDataService is registered like this

    export class AppModule {
  constructor(
    private eds: EntityDefinitionService,
    private entityDataService: EntityDataService,
    private transactionsDataService: TransactionsDataService
  ) {
    eds.registerMetadataMap(entityMetadata);

    entityDataService.registerService('Transaction', transactionsDataService);
  }
}

and TransactionsDataService overrides getAll like below.

    export class TransactionsDataService extends DefaultDataService<Transaction> {
  constructor(
    http: HttpClient,
    httpUrlGenerator: HttpUrlGenerator,
    private notifyService: NotificationService
  ) {
    super('Transaction', http, httpUrlGenerator);
  }
  getAll(): Observable<Transaction[]> {
    return this.http
      .get<ApiResponse>('https://localhost:xxxx/transaction/GetLastSixMonth')
      .pipe(
        tap((data) => {
          this.notifyService.showSuccess(data.message, 'Sucess');
        }),
        map((res) => res.result),
        catchError((err) => {
          this.notifyService.showError(
            'Error While Six Month Transactions',
            'Error'
          );
          return of();
        })
      );
  }

The "$entitie" property of entity service is returning proper result after calling the api. and i am filtering that result to get count of something in an observable called last6MonthDepositCount$.

  this.last6MonthDepositCount$ = this.transactionsEntityService.entities$.pipe(
  map((transactions) => {
    const res = transactions.filter(
      (transaction) =>
        transaction.transactionType === TransactionType.Deposit
    ).length;
    return res;
  })//,
 // tap((val) => this.depositCount = val)
);

in the html i can use this observable

{{ last6MonthDepositCount$  | async }}

it works.

what should i do to use the value of this observable in another variable in my code ?

this.last6MonthDepositCount$.subscribe(x => this.dipositCount = x);

this kind of a code is not working. i get 0 in dipositCount which looks like the intial value of the observable.

if {{ last6MonthDepositCount$ | async }} is working , than .subscribe() will also work. — abhay tripathi, Jul 28 '20 at 02:19
Can you share how you are using this deposit count ? There seems to be some issue with reactive approach in using depositCount. — abhay tripathi, Jul 28 '20 at 02:22
i did this this.last6MonthDepositCount$.subscribe(x => { console.log(x); }); i get two values 0 and then 1 where 1 is the actual value i am looking for. — Raas Masood, Jul 28 '20 at 02:22
ok so i am using ChartJS chart where i have to setup 2 values in a pie chart. this.myChartData.data.datasets[0].data = [this.depositCount, this.withdrawCount]; — Raas Masood, Jul 28 '20 at 02:25
i updated a question. highlighted line is the one i am trying to assign the values to. i have a depositCount same exact way i have a widthdrawCount. — Raas Masood, Jul 28 '20 at 02:30
Check answer, you might have to tweak it according to your code. — abhay tripathi, Jul 28 '20 at 02:51

abhay tripathi · Accepted Answer · 2020-07-28T03:13:13.200

1

Here Reactive paradigm is colliding with imperative one.

myChart.data.datasets[0].data gets called before this.last6MonthDepositCount$.subscribe(x => this.dipositCount = x); gives the final value.

What you need to do is :- initialize chartJs with initial/default value in ngAfterViewInit and also update myChartData in this.last6MonthDepositCount$.subscribe() method.

If you want to get results from 2 observables together, use combineLatest

const timerObservable1 = timer(0, 1000); 
    const timerObservable2 = timer(500, 1000); 
    const combinedTimers = combineLatest(timerObservable1, timerObservable2);
    combinedTimers.subscribe((value1, value2) => //DO something with both values together to update Chart);

edited Jul 28 '20 at 03:13

answered Jul 28 '20 at 02:47

abhay tripathi

3,547
4
20
25

As you said this.last6MonthDepositCount$.subscribe(x => { console.log(x); }) gives two values. This is the issue. build your chart in .subscribe() method. – abhay tripathi Jul 28 '20 at 02:50
but i have two .subscribe one for deposit Value and one for withdraw which subscribe should i use. and do you mean like this this.last6MonthDepositCount$.subscribe(x => { this.depositCount = x; this.myChartData.update(); }); ? myChartData is already defined in ngAfterViewInit – Raas Masood Jul 28 '20 at 02:59
1

Use combineLatest to combine result of both and build chartData there. – abhay tripathi Jul 28 '20 at 03:08
i figured out thankyou ! i am doing it as you described. i am doing both .subscribe s in inside ngAfterViewInit and both .subscribes have this.myChartData.update(); in it. – Raas Masood Jul 28 '20 at 03:08

how to subscribe to an Observable returned from ngrx's Entity Data Service

1 Answers1