You cannot assign type void to type any

Question

You cannot assign type void to type any

I'm currently working on a component that involves some code:

export class AddNewCardComponent { 

    public concept = [];
    constructor( 
        private _router: Router,
        private _empDiscService: empDiscService) { 

        }

    ngOnInit(){
        this.concept = this._empDiscService.StoreMaster()
        .subscribe((data)=>{
            this.concept =  data;
        });
    }
}

The main purpose is to retrieve a variable from the services and store it in my array called "store". However, I encountered an issue where:

type void is not assignable to type any

Here's the snippet of my service code:

import {Injectable} from '@angular/core';
import { Httpprovider } from './httpprovider';

@Injectable()
export class empDiscService{

    public storedata = [];
    constructor(private _httpprovider: Httpprovider){

    }

    StoreMaster():Observable<any[]>{
        return this._httpprovider.httpReq('http://192.168.1.40:5000/getconcept','GET',null,null).map(res =>{<any[]>res.json()}
    };
}

angular typescript

Answer 1

Answer №1

import { JobService } from './../services/job.service';
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-job-list',
  templateUrl: './job-list.component.html',
  styleUrls: ['./job-list.component.css']
})
export class JobListComponent implements OnInit {

 **jobs:any = [];**
error = '';
constructor( private jobservice:JobService) { }

ngOnInit() {
this.jobservice.getJobs().subscribe(

data => this.jobs = data,
error => {console.log ('error')}

);


}

}

Answer 2

import { JobService } from './../services/job.service';
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-job-list',
  templateUrl: './job-list.component.html',
  styleUrls: ['./job-list.component.css']
})
export class JobListComponent implements OnInit {

 **jobs:any = [];**
error = '';
constructor( private jobservice:JobService) { }

ngOnInit() {
this.jobservice.getJobs().subscribe(

data => this.jobs = data,
error => {console.log ('error')}

);


}

}

Answer 3

Answer №2

When working with RxJs, it is important not to call the subscribe() method inside the service and instead return the object directly.

export class EmployeeDiscountService{

    public storedData = [];
    constructor(private _httpProvider: HttpProvider){

    }
    retrieveMasterData(): Observable<any[]>{
       return this._httpProvider.httpReq('http://192.168.1.40:5000/getmapmasterstore','GET',null,null).map(res =>{<any[]>res.json()}
    }

}

Your component setup should look like this:

constructor( 
        private _router: Router,
        private _employeeDiscountService: EmployeeDiscountService) { 
          this.store = this._employeeDiscountService.retrieveMasterData()
            .subscribe((data)=>{
                    this.storedData =  data;
        });
}

The mistake in your code was that the service method was not returning anything.

retrieveMasterData():Observable<any[]>{}

By making this change, you will fix the issue you were encountering.

Answer 4

When working with RxJs, it is important not to call the subscribe() method inside the service and instead return the object directly.

export class EmployeeDiscountService{

    public storedData = [];
    constructor(private _httpProvider: HttpProvider){

    }
    retrieveMasterData(): Observable<any[]>{
       return this._httpProvider.httpReq('http://192.168.1.40:5000/getmapmasterstore','GET',null,null).map(res =>{<any[]>res.json()}
    }

}

Your component setup should look like this:

constructor( 
        private _router: Router,
        private _employeeDiscountService: EmployeeDiscountService) { 
          this.store = this._employeeDiscountService.retrieveMasterData()
            .subscribe((data)=>{
                    this.storedData =  data;
        });
}

The mistake in your code was that the service method was not returning anything.

retrieveMasterData():Observable<any[]>{}

By making this change, you will fix the issue you were encountering.

Answer 5

Answer №3

StoreMaster() function does not have a return value. It may be necessary to modify the service method to return an observable:

StoreMaster(){
return this._httpprovider.httpReq('http://192.168.1.40:5000/getmapmasterstore','' +
  '  GET',null,null).subscribe((data)=>{
  var brData = [];
  for (let i=0;i<data.length;i++){
    brData.push(data[i]);
  }
  return brData;
});
}

and ngOnInit

    ngOnInit(){
        this._empDiscService.StoreMaster()
            .subscribe(store => this.store = store);
    }

Answer 6

StoreMaster() function does not have a return value. It may be necessary to modify the service method to return an observable:

StoreMaster(){
return this._httpprovider.httpReq('http://192.168.1.40:5000/getmapmasterstore','' +
  '  GET',null,null).subscribe((data)=>{
  var brData = [];
  for (let i=0;i<data.length;i++){
    brData.push(data[i]);
  }
  return brData;
});
}

and ngOnInit

    ngOnInit(){
        this._empDiscService.StoreMaster()
            .subscribe(store => this.store = store);
    }

You cannot assign type void to type any

Answer №1

Answer №2

Answer №3

Similar questions

RouterLink causing component not to reload

Angular Material conflicting dependencies

Tips for concealing a chosen alternative from the menu of options when utilizing mat-select

Unable to bring in CSS module in a .tsx file

Show variously colored information for each selection from the dropdown using Angular Material

Preventing duplicate actions on a Subject with Angular 7's rxjs debounceTime operator

Are you looking to use the 'any' type instead of the 'Object' type? Angular Services can help you with that

When two-dimensional arrays meet destructuring, it results in a type error

Printing the HTML Template of a widget with multiple loops results in a blank first page being displayed

I need help differentiating "namespace" from "static attributes" in TypeScript

Extract objects from a nested array using a specific identifier

I recently used the ng new ang-routing command to generate a fresh Angular project in my directory, but encountered an error while doing so

sending additional query parameters with an HTTP request

Incorporate an image icon into an Angular grid

Angular Kendo Grid (version 1.4.1)

Navigating the complexities of extracting and storing a data type from a collection of objects

How come TypeScript does not generate an error when attempting to import a default export that does not exist?

What is the best way to grasp the connections between the any, unknown, {} data types and their relationships with other types?

Unveiling a node through code in the angular tree component

Managing the closest element depending on the selected option in Angular 5