Service variable comes as UNDEFINED in Angular Component 2

Question

I’m not getting a variable from a service at 2. I have companies-index.component.ts and companies-crud.service.ts. I would like to take a service variable in Component but it always comes as UNDEFINED, but if I run within the service some function it returns normal.

I’m doing a separate archery crud to be better organized. Follows the codes

companies-index.component.ts

import { Component, OnInit } from '@angular/core';

import { EmpresasCrudService } from './services/empresas-crud.service';

import {PagerService} from './services/pagination';

@Component({
  selector: 'empresas-index',
  templateUrl: 'app/cadastros/empresas/empresas-index.component.html',
  styleUrls: ['app/cadastros/empresas/empresas-index.component.css']
})
export class EmpresasIndexComponent implements OnInit{

    constructor(private dataService: EmpresasCrudService, private pagerService: PagerService) {

  }
     // array of all items to be paged
    public allItems: any[];

    // pager object
    pager: any = {};

    // paged items
    pagedItems: any[];

    _page = 1;
    _mostrar = 1;
    _qtd;
    _loading = false;
    Items;

    getEmps(page: number, mostrar:number){


        this.dataService.getEmpresas(page, mostrar);
        console.log(this.dataService.allItems);

    }



    ngOnInit(){
      this.getEmps(this._page,this._mostrar);

    }




}

Empresa-crud.service.ts

import { Injectable, Input, Output } from '@angular/core';
import { HttpService } from '../../../shared/services/http.service';
import {Observable} from 'rxjs/Rx';

// Import RxJs required methods
import 'rxjs/add/operator/map';

import {Empresa} from '../models/empresas';
import {ListResult} from '../models/pagination';

//import 'rxjs/add/operator/catch';

@Injectable()
export class EmpresasCrudService {


    constructor(private _http: HttpService) {
    }

    //Url
    _endpoint_url: string = 'http://www.sysferaser.com/data/';
    //Itens a pegar da API
    allItems: any[];
    //Quantidade de itens totais da API
    _qtd;

    //faz a requisição
    getHttpEmpresas(page:number, mostrar:number): Observable<ListResult<Empresa>> {
        return this._http.httpGet(this._endpoint_url + mostrar + "?page=" + page)
            .map(response => response.json());
    }

    //Atribui os dados nas variáveis allItems e _qtd
    getEmpresas(page:number, mostrar:number){
        this.getHttpEmpresas(page, mostrar)
            .subscribe(
                people => {
                    this.allItems = people.data,
                    this._qtd = people.total
                },
                error => console.error('Error: ' + error),
                () => console.log('Completed!')

            );
    }


}

Answer 1

I suggest a change in your coding. You are making all the ajax request within your service. It may be, but I prefer it is that part of the process is carried out within the component. This way you can make Forks, better manipulate the request among other situations.

I suggest you change your coding to the following:

companies-index.component.ts

import { Component, OnInit } from '@angular/core';
import { EmpresasCrudService } from './services/empresas-crud.service';
import {PagerService} from './services/pagination';

@Component({
  selector: 'empresas-index',
  templateUrl: 'app/cadastros/empresas/empresas-index.component.html',
  styleUrls: ['app/cadastros/empresas/empresas-index.component.css']
})
export class EmpresasIndexComponent implements OnInit{

    constructor(private dataService: EmpresasCrudService, private pagerService: PagerService) {}

    // array of all items to be paged
    public allItems: any[];

    // pager object
    pager: any = {};

    // paged items
    pagedItems: any[];

    _page = 1;
    _mostrar = 1;
    _qtd;
    _loading = false;
    Items;

    getEmps(page: number, mostrar:number){
        this.dataService.getHttpEmpresas(page, mostrar).subscribe(result => {
              this.allItems = people.data,
              this._qtd = people.total          
        },
            error => console.error('Error: ' + error),
            () => console.log('Completed!'));
    }

    ngOnInit(){
      this.getEmps(this._page,this._mostrar);
    }

}

Empresa-crud.service.ts

//import 'rxjs/add/operator/catch';

@Injectable()
export class EmpresasCrudService {


    constructor(private _http: HttpService) {
    }

    //Url
    _endpoint_url: string = 'http://www.sysferaser.com/data/';
    //Itens a pegar da API
    allItems: any[];
    //Quantidade de itens totais da API
    _qtd;

    //faz a requisição
    public getHttpEmpresas(page:number, mostrar:number){
        return this._http.httpGet(this._endpoint_url + mostrar + "?page=" + page)
            .map(response => response.json());
    }

}

This will work well for you. You will have access to ajax request returns and all your variables will be populated. Up front when you need to make multiple requests where one depends on the other, you can use Fork and everything is easier.

I didn’t understand very much why you created the service "Shared/services/http.service". But anyway.. this should work there.

This approach of mine will work for you, but if you really need the structure that you mentioned earlier, put there that we look together for the solution. hug!