1
resposta

Cannot read property of undefined

Bom dia..estou tentando fazer uma requisição GET no webservice que criei, porém retorna o erro Cannot read property of undefined ao tentar ler os dados da resposta na página listaEventos.html...estou usando o UsersProvider...estou passando argumento na requisição pra ver se retorna algo

Página users.TS

import {HttpClient} from '@angular/common/http' ;
import { Injectable } from '@angular/core';
import { Http, Headers, Response } from '@angular/http';
import 'rxjs/add/operator/map';


import { Observable } from 'rxjs/Observable';

@Injectable()
export class UsersProvider {

    private URL = 'http://localhost:8080/agenda?dataInicio=23/09/1945'



  constructor(public http: Http) {

  }




 listarEventos(dataInicio? : string, dataFim? : string, descricao? : string, nomeEvento?: string) { 


 this.http.get(this.URL)
    .map(res => res.json())
  .subscribe(data => {
    this.http = data ;
    console.log(data) ;
 });

  } 

}

Página lista-eventos.TS

import { Component } from '@angular/core';
import {  NavController, NavParams, ToastController } from 'ionic-angular';
import { UsersProvider } from '../../providers/users/users' ;
import { HttpClient } from '@angular/common/http';




@Component({
  selector: 'page-lista-eventos',
  templateUrl: 'lista-eventos.html',
})



export class ListaEventosPage {



 constructor(public navCtrl: NavController, public navParams: NavParams, private toast: ToastController, private userProvider:UsersProvider) {

    }

    listarEventos() { 

                this.userProvider.listarEventos();

                        this.toast.create({message : 'Listagem realizada com sucesso',position: 'botton', duration : 3000 }) ;


      }
}

`

Página listaEventos.html



<ion-header>

  <ion-navbar color="dark">
    <ion-title>ListaEventos</ion-title>
  </ion-navbar>

</ion-header>


<ion-content padding>


    <ion-label fixed> {{ListaEventosPage.dataInicio}} </ion-label>

</ion-content>

Se alguém puder me dizer o que está errado, agradeço..muito obrigado amigos

1 resposta

Olá, Minha sugestão...

No provider:

listarEventos(dataInicio? : string, dataFim? : string, descricao? : string, nomeEvento?: string) { 

return  this.http.get(this.URL)
    .map(res => res.json())
    .toPromise();
}

Isso irá retornar uma promise, que você poderá recuperar em sua page e deverá declarar um atributo da classe chamado eventos:

public eventos;

listarEventos() { 

this.userProvider.listarEventos()
    .then(eventos =>{
        this.eventos = eventos;
        this.toast.create({message : 'Listagem realizada com sucesso',position: 'botton', duration : 3000 }) ;
    });
}

e no seu arquivo html deve referenciar a variável eventos:

<ion-label fixed> {{eventos.dataInicio}} </ion-label>

Espero ter ajudado!

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software