Two Models in Angular for Passing & Display Data

Question

I have a problem with using models in ngxs. I have to use different model for passing data to api and getting data from the api

I have a Report model and NetIncome model basically. How will i able to integrate them since theres an error on my code. I can only use one model? Or how can i revise this in my model?

I just want the best practices on my Angular app so i want the proper models to be assigned. Feel free to restructure or change a lot of codes etc...

Here the stackblitz link Click Here

@Action(GetNetIncomes)
  GetNetIncomes(ctx: StateContext<ReportStateModel>, { payload }: GetNetIncomes) {
    return this.reportsService.getNetIncomes(payload).pipe(
      tap((result: NetIncome) => {
        ctx.patchState({
          net_incomes: result,
        });
      }),
      catchError((err) => {
        console.log(err);
        return throwError(err);
      })
    );
  }

Answer 1

getNetIncomes returns an array of Reports or Report[] and then you are trying to cast it to a NetIncome when it will not comply. I suggest adding a map operator before the tap to transform result into a NetIncome or change the type of a net_incomes in ReportStateModel