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

Differences between Typescript Import and JavaScript import

`I'm having difficulty transferring the project to Typescript paths`

Having trouble populating and submitting a selected option from a dropdown menu in Angular?

Tips for managing Typescript Generics while utilizing the styled function provided by the '@mui/material/styles' package

Tips for preventing CORS and SSL issues when using localhost

The term 'shuterstock_init' is meant to be a type, however, it is mistakenly being treated as a value in this context

What is the process of incorporating a custom data type with ngModel in Angular Dart?

Discover a more efficient method for expanding multiple interfaces

Issue with Angular 7 Universal: components inside are failing to display

Develop a TypeScript class that includes only a single calculated attribute

Turning slide toggle on and off in Angular Material: A step-by-step guide

Issues with Angular Form Builder's Form Control not updating when invalid, causing errors with ngIf statements

Effortlessly bring in Typescript namespace from specific namespace/type NPM package within a mono-repository

The border of the Material UI Toggle Button is not appearing

Having an empty string in an array used with *ngFor can lead to unusual positioning problems, unlike when the array contains non-empty strings

AWS Lambda serverless deployment of Angular Universal is failing to detect javascript files in the dist/browser directory

This error message indicates that the certificate for Angular 13 has expired

Reactive Programming: Transforming an earlier value as it moves down the pipeline

Unit Testing in Vue.JS: The original function remains active even after using sinon.stub()

"Enhancing the appearance of mat-sidenav elements in Angular Material 7 with customized