Issue with forkJoin in the share component (and merging boolean variables) is not defined

I am facing an issue with my service where I need to share the result of a forkjoin, but the component is showing up as undefined

Here is my service logic layer:

         @Injectable({
                providedIn: 'root'
            })
            
            export class CoreStateService {
                private subject = new BehaviorSubject<any>([]);
                hasError$: Observable<any> = this.subject.asObservable();

                constructor(private api: HomeGuardService) {}
                
                    public verifyFailed(): Observable<any>{
                    return forkJoin([this.api.getPerfilNew$, this.api.getPosicaoConsolidada()])
                         .pipe(
                            catchError(err => {
                                this.statusError = err.status;
                                console.log('--->', this.statusError);
                                return of([]); 
                            }),
                            map(([perfilInvestors, position]) => {
                                this.perfilInvestors = perfilInvestors;
                                this.investments = position;
                                //verify if perfil failed
                                if (this.statusError) {
                                    this.perfilFailed = true
                                } else {
                                    this.perfilFailed = false
                                }
                                //verify if  investments failed
                                if (this.investments) {
                                    this.hasInvestiments = true;
                                }
                                //combine investments and statusError
                                this.hasError$ = combineLatest([this.statusError, this.hasInvestiments])
                                    .pipe(
                                        map(([statusError, hasInvestiments]) => statusError && !hasInvestiments)
                                    );
                            }),
                            tap(hasError$ => this.subject.next(hasError$)),
                        );
                }
    }

And in my component:

   constructor(private coreState: CoreStateService) {}
    
public ngOnInit() {
        this.coreState.subscribe(res => {
            console.log(res)
        })
    }

The result in the console can be seen here.

I am looking for a solution to properly handle and return the value of hasError$ in components based on its true or false state.

Answer №1

1- Instead of subscribing to the entire service, you should subscribe to hasError$ for proper functionality:

this.coreState.hasError$.subscribe(res => {
            console.log(res)
        })

2- Have you checked if verifyFailed() is being called anywhere in the code? It must be triggered to generate the desired outcomes.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips on adjusting a standard CSS layout with JavaScript and jQuery to generate a unique ID for the updated style

My CSS contains IDs that look like this: <style> .HIDE-DISPLAY-k { background-color: orange; position: fixed; width: 100%; height: 100%; top: 10px; bottom: 0px; left: 10px; right: 0px; overflow: hidden; } #SHOW- ...

The lazy loading feature is affected by Angular's ng build process

My app has lazy loading configured and works fine with ng serve. However, when I use ng build, it stops working without any error messages. I have checked the Angular official documentation and can't seem to find any missing steps in my process. I in ...

Variety of hues present on the mesh surface facing the plane

I am facing a challenge in coloring a face that is looking towards a plane. I have considered two different approaches: One option is to position a light source below the plane (which is only one-sided) so that the underside of the object receives a l ...

The absence of a defined window - react-draft-wysiwyg integration with Next.js (SSR) is causing issues

Currently, I am in the process of developing a rich text editor that is used to convert plain HTML into editor content using Next.js for SSR. While working on this project, I encountered an error stating "window is not defined," prompting me to search for ...

Simplified method for creating Angular templates

Take a look at this code snippet my_app.run( [ '$templateCache' , function( $templateCache ) { var template = "" + "{{ item.name }}" + "<ul ng-if='item.sub'>" + "& ...

Avoid displaying the identical div through consecutive random fade-ins and fade-outs

I'm trying to make a JavaScript function that selects a random div from a list of divs, displays it for a few seconds, fades it out, and repeats this process in a loop. The issue I'm facing is that sometimes the same div is selected consecutively ...

Having difficulty maintaining the consistent size of the MathJax math font in relation to the surrounding text

Issue I am currently using MathJax to display mathematical equations on my webpage: https://i.sstatic.net/EfvVq.png The problem I am facing is that I want the math font to appear larger than the surrounding text, as depicted in the image above. However, ...

show additional worth on the console

Just starting out with JavaScript. Trying to display additional values in the console. Uncertain about how to access add-ons. Can anyone help me troubleshoot? Here is my code snippet below: https://jsfiddle.net/6f8upe80/ private sports: any = { ...

Having trouble getting Emberjs to properly handle an Ajax POST request

Currently, my goal is to send data to the database using Ajax POST. To start off, I have an HTML form as follows: <script type="text/x-handlebars" id="project"> <div class="row"> <div class="span6"> <form class ...

Attempting to alert a particular device using Flutter for notification delivery

Currently, I am developing a Chat app using Flutter and attempting to send notifications to specific devices through Firebase functions. Initially, I retrieve the device token and store it in Firebase. Now, my challenge lies in fetching the token and invok ...

Exploring Ancestors with Jquery to Find Input Fields

In my current project, I am working on a function that needs to extract the values from two input fields within a specific div element. These values will then be added to an array and posted as JSON data. However, I am facing difficulties in navigating thr ...

Manage numerous canvas animations

Is there a way to interact with an already drawn Canvas animation? I am attempting to create 3 distinct tracks that can be controlled by a "Start" and "Stop" button. However, when I click the Start button on the first canvas, it triggers the last canvas in ...

Is it not possible to apply the .includes method on a string within a v-if directive while utilizing a computed property?

Problem I am facing an issue while trying to determine if a string contains a substring within the Vues v-if directive. The error message I receive is: TypeError: $options.language.includes is not a function The technologies I am using are Vue, Vuex, and ...

Is there a way to determine if a container is overflowing at the top?

Currently, I am using Puppeteer to scrape Slack. My goal is to confirm whether I have scrolled to the very top of the channel feed. The issue arises because the channel feed does not actually scroll, making it impossible for me to utilize the method outli ...

Utilize object destructuring in React when implementing pagination functionality and incrementing the page by one

Whenever the bottom of this div is reached, I want to add one to the page. However, I keep getting an error saying "use object destructuring" and I'm not sure how to resolve it. Below is the code snippet: const vendorContainer = documen ...

Try rotating a triangle in 3D using either CSS or JavaScript

I want to create a right-angle triangle that looks like this . . . . . . . . . . . . . . . . . . but I also want to add a 3D animation that will transform it into a right angle like this . . . . . ...

The component ShoppingCartComponent is missing the property 'myForm'

Here is the html code for a component: <form *ngFor="let product of products" [formGroup]="myForm" name="myForm" (ngSubmit)="onSubmit([product.name], [product.price], int)"> <div id="cartItemsList&q ...

Leveraging Mongodb's aggregate feature to calculate the overall quantity of a specific product that has been ordered across all

Recently delving into the realm of javascript, I am currently tackling a dashboard project that requires displaying the total quantity of each product ordered. Although I have successfully defined a variable 'qty' to represent the quantity of an ...

Ways to include various inputs with chip

I am currently working on a project that involves implementing an email field using the chip component. However, I have encountered an issue where pasting multiple email values for the first time inserts them into the field successfully. But when I try to ...

Generating dynamic arrays in JavaScript

View the working code here: http://jsfiddle.net/sXbRK/ I have multiple line segments with unique IDs, and I know which ones intersect. My goal is to create new arrays that only contain the IDs of the overlapping line segments. I do not need the IDs of l ...