Как использовать сервисный метод внутри компонента? - PullRequest
Новая
       12

Как использовать сервисный метод внутри компонента?

0 голосов
/ 14 апреля 2019

Я не могу использовать метод обслуживания внутри компонента.У меня есть сервис и компонент.

Компонент 

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);
  }
 }

Сервис: 

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);
//   }
// )
  }

}

Мне нужно вызвать метод get_data в component.ts Когда я запускаюКод, который я получаю, не может прочитать свойство get_data из неопределенного.Пожалуйста, помогите мне исправить это.

Ответы [ 4 ]

1 голос
/ 14 апреля 2019

Потому что в UsermasterComponent, this.UsermasterService не определено.Вы объявляете его как свойство, но никогда не присваиваете ему никакого значения.Между свойством UsermasterService и классом UsermasterService.

нет никакой связи. С конструктором 

  constructor(private service: UsermasterService) { }

вы должны получить доступ к сервису как this.service.

1 голос
/ 14 апреля 2019

Чтобы использовать сервис, вам нужно использовать имя, которое вы использовали в конструкторе для внедрения вашего сервиса: 

this.values = this.service.get_data()
0 голосов
/ 15 апреля 2019 
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);
   });

  }
 }

Опять же, как я уже говорил в других вопросах - взгляните на инструменты генерации кода, такие как NSwag, для автоматической генерации такого типа исходного кода (Xyz.service.ts).

0 голосов
/ 14 апреля 2019

Два шага,

(i) Вам нужно добавить сервис в конструктор 

constructor(private userMasterService: UsermasterService) { }

(ii) Вызовите метод и подпишите его, 

this.values = this.userMasterService.get_data()
...