1

Não estou conseguindo pegar uma variável de um serviço no angular 2. Tenho a empresas-index.component.ts e a empresas-crud.service.ts. Gostaria de pegar uma variável do service no component mas ela sempre vem como UNDEFINED, mas se eu executar dentro do serviço alguma função ela retorna normal.

Estou fazendo um crud em arquvio separado pra ficar melhor organizado. Segue os códigos

empresas-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!')

            );
    }


}

1 Resposta 1

1

Sugiro uma mudança em sua codificação. Você está fazendo toda a requisição ajax dentro do seu serviço. Pode ser, mas eu prefiro é que parte do processo seja realizada dentro do componente. Dessa forma você pode fazer Forks, manipular melhor a requisição dentre outras situações.

Eu sugiro você alterar a sua codificação para o seguinte:

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

}

Isso vai funcionar bem para você. Você vai ter acesso aos retornos da requisição ajax e todas as suas variáveis serão populadas. Lá na frente quando você precisar fazer várias requisições na qual uma dependa da outra, você pode usar o fork e tudo fica mais fácil.

Não entendi muito pq você criou o serviço "shared/services/http.service". Mas enfim.. isso deve funcionar aí.

Essa minha abordagem vai funcionar para você, mas caso precisa realmente da estrutura que você havia citado anteriormente, posta aí que buscamos juntos a solução. abraço!

9
  • Olá Renato, quando fiz essa parte do sistema fiz de acordo com o que você postou e funcionou beleza, mas é que achei mais interessante colocar toda a parte de requisição em um serviço a parte ... creio que não irá funcionar mesmo assim .... pelo que li, é por causa do Observable que faz a requisição, já que não ta dando tempo dele setar a variável, ou seja, no meu component a variável é chamada antes dele setar no serviço ... seria melhor fazer com promises? sou novo no angular, venho do php 24/11/2016 às 13:37
  • Exatamente isso. Você faz uma requisição ajax dentro do serviço e tenta acessar os dados dentro do componente. Mas essa requisição ajax demora algum tempo e o componente tenta acessar os dados antes da requisição retornar o dados. Neste cenário você vai precisar usar o resolve do angular 2. O resolve é a maneira de você parar alguma coisa até que outra seja resolvida. No seu caso você precisa parar a renderização do componente até que o serviço complete a requisição ajax. 24/11/2016 às 13:52
  • Entendi. E pelo meu component você tem ideia de como faço isso? 24/11/2016 às 13:54
  • No seu caso eu não sei como vai ficar o resolve, pois toda a sua requisição ajax está dentro do serviço. Eu estruturo o meu projeto um pouco diferente de você. Eu fiz um CRUD no angular 2 e eu uso o resolve. você pode olhar lá e tentar adaptar a sua realidade. No meu caso eu precisei usar o resolve, pois queria que, ao editar um registro, o componente de formulário só fosse carregado depois que os dados já estivessem sido retornados pela requisição. dessa forma não tinha aquele problema de quando o cara fosse editar um registro, o formulário fosse carregado em branco para depois chegar os dado 24/11/2016 às 13:57
  • dê uma olhada no meu código que eu postei no git: github.com/renatosistemasvc/CRUD-agunlar-2/blob/master/app/… Veja o que pode ser feito para você. 24/11/2016 às 13:57

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .