1

Criei uma aplicação sidemenu e um provider (conexao-home.ts). Em uma página teste eu criei a função buscarUsuarios (associada a um button), que chama a função getRemoteUsers no provider.

No ionViewDidLoad coloquei a mesma chamada à função getRemoteUsers. Quando ele carrega a página, ele faz a requisição e lê os dados, mas não retorna na varável de retorno os valores.

Quando faço a chamada via click do button, ele retorna os dados na página.

Como resolvo isso? Sei que é um erro básico, mas não consegui resolver.

teste.ts

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { ConexaoHome } from '../../providers/conexao-home';

@Component({
  selector: 'page-teste',
  templateUrl: 'teste.html',
})
export class Teste {

  public users: any;
  public teste: any;

  constructor(public navCtrl: NavController, public navParams: NavParams, public conexaoServico: ConexaoHome) {

  }

  buscarUsuarios() {
    this.users = this.conexaoServico.getRemoteUsers('Pegando os usuários');
    console.log('chamando...');
    console.log(this.users);
    console.log('retornando...' + this.users);
  }

  buscar() {
    this.teste = this.conexaoServico.getRemoteTeste('testando...');
    console.log(this.teste);
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad Teste');
    //this.buscarUsuarios();
    this.users = this.conexaoServico.getRemoteUsers('Pegando os usuários');
    console.log(this.users);
  }

}

teste.html

<ion-header>
  <ion-navbar>
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>Teste</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding="false">
  <button ion-button (click)="buscarUsuarios()">Pegar Dados</button>
  <br>
  <button ion-button (click)="buscar()">Pegar Dados 2</button>
  {{ teste }}
  <br>
  <ion-list>
    <button ion-item *ngFor="let user of users">
      <ion-avatar item-left>
        <img src="{{ user.picture.medium }}">
      </ion-avatar>
      <h2 text-wrap>{{ user.name.title }} {{ user.name.first }} {{ user.name.last }}</h2>
      <h3 text-wrap>{{ user.email }}</h3>
    </button>
  </ion-list>
</ion-content>

provider conexao-home.ts

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map';

@Injectable()
export class ConexaoHome {

  public usuarios: any;
  public areas: any;

  constructor(public http: Http) {
    console.log('Hello ConexaoHome Provider');
  }

  getRemoteUsers(tipo) {
    this.http.get('https://randomuser.me/api/?results=10').
    map(res => res.json()
    ).subscribe(data => {
      console.log(data.results);
      console.log(tipo);
      this.usuarios = data.results;
    });
    return this.usuarios;
  }

  getRemoteTeste(tipo) {
    console.log(tipo);
    return ('teste executado 2');
  }
}

Obrigado.

1
  • Em tempo: Ionic V 2.2.3
    – Murilo
    9/05/2017 às 17:31

1 Resposta 1

1

this.users é async, dessa forma você não saberá quando ele conterá algum valor. Além do mais, você está fazendo um subscribe sob o @injectable onde ele apenas deveria servir os dados, quem deve observar é a page que o está chamando.

Faça as seguintes alterações:

teste.ts:

   buscarUsuarios() {
    this.conexaoServico.getRemoteUsers('Pegando os usuários').subscribe(
    (users) => { console.log(users); this.users = users; }, 
    (err) => { console.error(err) },
    () => { console.log('done getting remote users') }
    );
  }



  ionViewDidLoad() {
    this.buscarUsuarios();
  }

conexao-home.ts:

getRemoteUsers(tipo) {
        return this.http.get('https://randomuser.me/api/?results=10').map(
        (response) => {
            return response.json().results;             
        }
    )
  }
1
  • Funcionou, obrigado pelas correções.
    – Murilo
    14/05/2017 às 20:28

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 .