How to handle the "subscribe doesn't exist on type void" error when trying to subscribe to data from a service?

I am currently working on an Angular 7 application and I have encountered an error stating that the property 'subscribe' does not exist on type void when trying to subscribe to data from a service.

The error is displayed in the subscribe data function within app.component.ts. How can I resolve this issue?

allReportCategories:any[];
ngOnInit() {


       this._displayreport.getallReportCategories().subscribe((data: any[]) => {  
        this.allReportCategories = data;  

      }); 
}

In the display report service ts:

allReportCategories:any[];


getallReportCategories(){

    return 

     this.allReportCategories=[
    {
        "reportCategoryID": 1,
        "reportCategory": "Dashboard Parametric",
        "isDeleted": false,
        "menuIcon": "icon-home"
    },
    {
        "reportCategoryID": 2,
        "reportCategory": "Monitor Reports",
        "isDeleted": false,
        "menuIcon": "icon-list"
    },
    {
        "reportCategoryID": 3,
        "reportCategory": "Other Reports",
        "isDeleted": false,
        "menuIcon": "icon-docs"
    },
    {
        "reportCategoryID": 4,
        "reportCategory": "PCN Flow",
        "isDeleted": false,
        "menuIcon": "icon-list"
    },
    {
        "reportCategoryID": 5,
        "reportCategory": "Compliance By Document",
        "isDeleted": false,
        "menuIcon": "icon-home"
    }
];

  }

A sample of the code can be found on StackBlitz here:

https://stackblitz.com/edit/create-1arrvm?file=app%2Fdisplayreport.service.ts

To be more specific with my question, what changes should I make to this line of code:

this._displayreport.getallReportCategories().subscribe
javascripttypescriptangular7angular-components

Answer №1

To start receiving updates, you must set up an observable and subscribe to it.

For example:

In the Display Report Service TypeScript file:

import { BehaviorSubject } from 'rxjs';


getallReportCategories(){

const allReportCategories = [
    {
        "reportCategoryID": 1,
        "reportCategory": "Dashboard Parametric",
        "isDeleted": false,
        "menuIcon": "icon-home"
    },
    {
        "reportCategoryID": 2,
        "reportCategory": "Monitor Reports",
        "isDeleted": false,
        "menuIcon": "icon-list"
    },
    {
        "reportCategoryID": 3,
        "reportCategory": "Other Reports",
        "isDeleted": false,
        "menuIcon": "icon-docs"
    },
    {
        "reportCategoryID": 4,
        "reportCategory": "PCN Flow",
        "isDeleted": false,
        "menuIcon": "icon-list"
    },
    {
        "reportCategoryID": 5,
        "reportCategory": "Compliance By Document",
        "isDeleted": false,
        "menuIcon": "icon-home"
    }
];


    return new BehaviorSubject(allReportCategories)

  }

In the component:

allReportCategories:any[];
ngOnInit() {


       this._displayreport.getallReportCategories().subscribe((data: any[]) => {  
        this.allReportCategories = data;  

      }); 
}

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

The gradual disappearance and reappearance of a table row

I am struggling with making a row fade out when a specific select value is chosen (such as "termination"), and fade in when any other option is selected. The code works perfectly fine when the div ID is placed outside the table, but once I encapsulate it w ...

javascripthtmlcss

Wookmark js isn't designed to generate columns from scratch

I am attempting to utilize the Wookmark jQuery plugin in order to create a layout similar to Pinterest. However, I am encountering an issue where Wookmark is not creating columns within the li elements, instead it is simply stacking images on top of each o ...

javascriptjqueryhtmlcss

Trouble Strikes: Heroku Deployment Fails for Node.js/React App

Currently, I am in the process of working on a React/Node application using create-react-app and attempting to deploy it through Heroku. However, we are encountering an error message related to react-scripts when deploying on Heroku: Error: sh: 1: react-sc ...

javascriptnode.jsreactjsherokucreate-react-app

Absolute file path reference in Node.js

I'm working on a Node.js project using WebStorm IDE. Here's the structure of my project: The root folder is named "root" and inside are 2 folders: "main" and "typings". The "main" folder has a file called "foo.ts", while the "typings" folder co ...

javascriptnode.jstypescriptwebstorm

Instead of receiving a response, an error is being displayed in the terminal

I'm currently developing a RESTful API using the Express framework. I've implemented a middleware, but for some reason, the error isn't being passed to the middleware as expected. I have code in the following files: in router.js router.get(& ...

javascriptnode.jsexpress

Avoiding flickering when the browser back button is clickedAvoiding the flickering effect

As I work on developing an Asp.Net application, a challenge has arisen. In order to prevent users from navigating back to the login page after logging in, I have implemented JavaScript code successfully. However, when clicking the browser's back butto ...

asp.netjavascripthtmlbrowser

What is the best way to enable a child category on a treeview within a Vue component?

I am working with two vue components. The first component (parent component) looks like this: <template> ... <ul class="filter-category" v-for="list in categories"> <list-category :data="list" :category-id="category ...

javascriptvue.jstreeviewvuejs2vue-component

Dynamically change the content of the DataTable by utilizing jQuery

I am facing an issue with updating a DataTable using jQuery when the contents of the table are modified. Initially, I have a HTML table with an empty tbody, which is populated dynamically based on selected filters such as select options. The table uses Dat ...

javascriptjquerydatatableshtml-table

What is the return value of the .pipe() method in gulp?

When using the code snippet below, what will be the input to and output of .pipe(gulpIf('*.css', cssnano()))? gulp.task('useref', function(){ return gulp.src('app/*.html') .pipe(useref()) .pipe(gulpIf('*.js&apo ...

javascriptnode.jsnpmgulpnpmjs

What methods can I use to minimize the frequency of the blue box appearing around text?

I successfully developed code that enables user interaction with text, triggering the opening of a modal box when clicked. In this modal box, the text turns red upon clicking, indicating activation of a checkbox. However, I notice that every time I intera ...

javascripthtmlcss

Tips for implementing a "load more" button to fetch the next 50 requests using axios

Below is the current code I am using, with the start of the URL within my proxy: import React, { Component } from "react"; import axios from "axios"; class BeerList extends Component { state = { beers: [] }; componentDidMount() { axios ...

javascriptreactjsaxios

Checkbox selections persist when navigating between pages

I am currently working with Angular 9 and I have a list of checkboxes that need to default to true when displaying certain data. If one of these checkboxes is unchecked, it should trigger the display of specific information. The issue I am facing is that o ...

angulartypescriptcheckboxlistngoninit

Ways to generate an element with a specific identifier using a single line of code

When creating an element, I often use the following syntax: var foo = document.createElement('div'); To set the ID of the div, I would typically do this: foo.setAttribute('id', 'divName'); After some searching online, I ca ...

javascriptjqueryhtmlcss

Shadows with pixel art style in Threejs

I developed an application where I dynamically created shelves. Everything is working fine except for the shadows. I'm not sure if the issue lies with the lighting or the objects themselves. Can anyone provide some assistance? Here is a snapshot showc ...

javascriptthree.js

Getting information from MongoDB using Node.js and Angular

Currently, I am facing difficulty in retrieving data from MongoDB (I'm also using Mongoose) and sending it to Angular in order to populate the ng-repeat list with the retrieved data. I have managed to either display the data on a blank page directly f ...

javascriptangularjsnode.jsmongodbmean-stack

Some places may not have detailed information available when using the Google Places API

Greetings I am currently in the process of developing a page on my website that utilizes the Google Places API along with the user's geographical coordinates (latitude, longitude) to locate nearby restaurants. In my code, I have implemented a functio ...

javascriptangularjsgoogle-mapsgoogle-places-api

Flipping the Script on CSS Animations

Hey there, it's been about four hours and I'm hitting a wall. On my website (), the left-hand menu fades out as you scroll down, just as I intended. Now, I need some help getting the menu to fade back in when the user either reaches the bottom of ...

javascriptjqueryhtmlcssanimation

Modify a number with a check box using inline Ajax

I have an HTML structure similar to this example: <li><label class="desc"><font color="green">Want to receive emails ($<span id="price">50</span>/month)</font></label> <input type="checkbox" checked ...

javascriptajaxjquery

The functionality of the JavaScript click function is limited to a single execution

In my dropdown menu, I have a submit function that triggers whenever any children of the dropdown are clicked. However, I now need to exclude a specific li element from this function because it requires inserting a tracking ID in a popup iFrame. The code ...

javascriptjqueryhtml

What could be causing my image not to show up on ReactJS?

I'm new to ReactJS and I am trying to display a simple image on my practice web app, but it's not showing up. I thought my code was correct, but apparently not. Below is the content of my index.html file: <!DOCTYPE html> <html> & ...

javascripthtmlcssreactjs