ERROR TypeError: Cannot read property 'getUsers' of undefined

0
votes

listuser.component.ts

import { Component, OnInit } from '@angular/core';
import { User } from 'src/app/user';
import { UserService } from 'src/app/shared_service/user.service';

@Component({
  selector: 'app-listuser',
  templateUrl: './listuser.component.html',
  styleUrls: ['./listuser.component.css']
})
export class ListuserComponent implements OnInit {
  private users:User[];
  _userService: any;
  constructor(private_userService:UserService) { }

  ngOnInit() {
    this._userService.getUsers().subscribe((users)=>{
      console.log(users);
      this.users=users;
    },(error)=>{
      console.log(error);
    })
  }

}

user.service.ts

import { Injectable } from '@angular/core';
import { Http, Response, Headers, RequestOptions} from '@angular/http';
import { Observable } from 'rxjs';
import  'rxjs/add/operator/map';
import 'rxjs-compat';
import 'rxjs/add/operator/catch';
import  'rxjs/add/observable/throw';

import { User } from '../user';

@Injectable({
  providedIn: 'root'
})
export class UserService {
  private baseUrl:string="http://localhost:8080/api";
  private headers = new Headers({'Content-Type':'application/json'});
  private options = new RequestOptions({headers:this.headers});
  _http: any;
  constructor(private_http:Http) { }

  getUsers()
  {
    return this._http.get(this.baseUrl+'/users',this.options).map((response:Response)=>response.json())
    .catch(this.errorHandler);

  }
  getUser(id:Number)
  {
    return this._http.get(this.baseUrl+'/user/'+id,this.options).map((response:Response)=>response.json())
    .catch(this.errorHandler);

  }
  deleteUser(id:Number)
  {
    return this._http.delete(this.baseUrl+'/user/'+id,this.options).map((response:Response)=>response.json())
    .catch(this.errorHandler);

  }
  createUsers(user:User)
  {
    return this._http.post(this.baseUrl+'/users',JSON.stringify(user), this.options).map((response:Response)=>response.json())
    .catch(this.errorHandler);

  }
  updateUsers(user:User)
  {
    return this._http.put(this.baseUrl+'/users',JSON.stringify(user), this.options).map((response:Response)=>response.json())
    .catch(this.errorHandler);

  }
  errorHandler(error:Response){
    return Observable.throw(error||'SERVER ERROR');
  }

}

after Run this ..the error: ERROR TypeError: Cannot read property 'getUsers' of undefined at ListuserComponent.push../src/app/components/listuser/listuser.component.ts.ListuserComponent.ngOnInit (listuser.component.ts:16) at checkAndUpdateDirectiveInline (core.js:18620) at checkAndUpdateNodeInline (core.js:19884) at checkAndUpdateNode (core.js:19846) at debugCheckAndUpdateNode (core.js:20480) at debugCheckDirectivesFn (core.js:20440) at Object.eval [as updateDirectives] (ListuserComponent_Host.ngfactory.js? [sm]:1) at Object.debugUpdateDirectives [as updateDirectives] (core.js:20432) at checkAndUpdateView (core.js:19828) at callViewAction (core.js:20069)

3
angularhibernatespring-boot
you has a type error is private<space>_http and private<space>_userService – Eliseo
NOTE: You're using Angular 2 syntax. Sometime ago Angular 5, 6 and 7 make appearance. The things changes for best. Now it's not used Http, else HttpClient, not used Rxjs 5, else Rxjs 6... – Eliseo

3 Answers

0
votes

Looks like you have forgotten to add blank space after private and before _userService in your constructor:

constructor(private _userService:UserService) { }
0
votes

you need to add space between private and _userService, so this

constructor(private_userService:UserService) { }

should be

constructor(private _userService: UserService) { }
0
votes

There are couple issues in your service class -

  1. Space between private and _http
  2. Remove additional declared instance variable _http: any;

Modified code

import { Injectable } from '@angular/core';
import { Http, Response, Headers, RequestOptions} from '@angular/http';
import { Observable } from 'rxjs';
import  'rxjs/add/operator/map';
import 'rxjs-compat';
import 'rxjs/add/operator/catch';
import  'rxjs/add/observable/throw';

import { User } from './user';

@Injectable({
  providedIn: 'root'
})
export class UserService {
  private baseUrl:string="http://localhost:8080/api";
  private headers = new Headers({'Content-Type':'application/json'});
  private options = new RequestOptions({headers:this.headers});
  constructor(private _http:Http) { }

  getUsers()
  {
    return this._http.get(this.baseUrl+'/users',this.options).map((response:Response)=>response.json())
    .catch(this.errorHandler);

  }
  getUser(id:Number)
  {
    return this._http.get(this.baseUrl+'/user/'+id,this.options).map((response:Response)=>response.json())
    .catch(this.errorHandler);

  }
  deleteUser(id:Number)
  {
    return this._http.delete(this.baseUrl+'/user/'+id,this.options).map((response:Response)=>response.json())
    .catch(this.errorHandler);

  }
  createUsers(user:User)
  {
    return this._http.post(this.baseUrl+'/users',JSON.stringify(user), this.options).map((response:Response)=>response.json())
    .catch(this.errorHandler);

  }
  updateUsers(user:User)
  {
    return this._http.put(this.baseUrl+'/users',JSON.stringify(user), this.options).map((response:Response)=>response.json())
    .catch(this.errorHandler);

  }
  errorHandler(error:Response){
    return Observable.throw(error||'SERVER ERROR');
  }

}