How to use service method inside a component?

问题

I am not able to use the service method inside a component. I have a service and a component.

Component

import { Component, OnInit } from '@angular/core';
import { Customer, Userdetails} from "./usermaster.model";
import { UsermasterService } from './usermaster.service';

@Component({
  selector: 'ngx-usermaster',
  templateUrl: './usermaster.component.html',
  styleUrls: ['./usermaster.component.scss'],
  providers:  [ UsermasterService ]
})
export class UsermasterComponent implements OnInit {
  values: any;
  UsermasterService: any;
  constructor(private service: UsermasterService) { }
  cust:Customer;
  user_details:Userdetails;
  ngOnInit() {
   this.cust={id:1,name:'dinesh'};
   console.log(this.cust);
   this.values = this.UsermasterService.get_data();
   console.log(this.values);
  }
 }

Service:

import { Injectable } from '@angular/core';
import { HttpClientModule } from  '@angular/common/http';

@Injectable({
  providedIn: 'root'
})
export class UsermasterService {
  httpClient: any;

  constructor() { }

  get_data(){
    var array=[];
    array['id']='1';
    array['name']='dineshss';
    return array;
//     this.httpClient.get('http://localhost/tasker/api/index.php/Welcome/get_data')
// .subscribe(
//   (data:any[])=>{
//     console.log(data);
//   }
// )
  }

}

I need to call the method get_data in component.ts When i run a code i get the error cannot read property get_data of undefined. Please help me fix this.

回答1:

Because in UsermasterComponent, this.UsermasterService is undefined. You declare it as a property, but never assign it any value. There's no connection whatsoever between the property UsermasterService and the class UsermasterService.

With constructor

  constructor(private service: UsermasterService) { }

you should access the service as this.service.

回答2:

To use the service you need to use the name which you have used in the constructor to inject your service:

this.values = this.service.get_data()

回答3:

Two steps involved,

(i)You need to inject the service in the constructor

constructor(private userMasterService: UsermasterService) { }

(ii) Call the method and subscribe it,

this.values = this.userMasterService.get_data()

回答4:

import { Injectable } from '@angular/core';
import { HttpClientModule } from  '@angular/common/http';

@Injectable({
  providedIn: 'root'
})
export class UserMasterService {

  constructor(private http: HttpClient) { }

  //Since this service is about UserMaster, 
  //don't name the method as 'get_data' which is too generic.
  //better to have a separate class 'User' so that the returned
  //type is Observable<User>
  getUsers(): Observable<any> {        
     return this.httpClient.get('http://localhost/tasker/api/index.php/Welcome/get_data');    
  }    
}

export class UserMasterComponent implements OnInit {
  ..........
  constructor(private service: UsermasterService) { }

  ngOnInit() {
   //other source code

   //let component decide how to handle the returned data.
   this.UserMasterService.getUsers().subscribe(users => {
       this.values = users;
       console.log(this.values);
   });

  }
 }

Again, as I suggested in other questions - have a look at the code generation tools like NSwag to generate this type of source code (Xyz.service.ts) automatically.

来源：https://stackoverflow.com/questions/55678071/how-to-use-service-method-inside-a-component

标签

angular

service

components