home.ts
import { Component } from '@angular/core';
import { NavController, LoadingController, AlertController } from 'ionic-angular';
import { Carro } from '../../models/Carro';
import { HttpClient, HttpErrorResponse } from '@angular/common/http'; // com o carroProvider, não precisa mais do HttpClient aqui
import { CarrosServiceProvider } from '../../providers/carros-service/carros-service';
import { Lifecycles } from '../../utils/ionic/lifecycles';
@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage implements Lifecycles
{
public carros: Carro[];
constructor(public navCtrl: NavController, private _http: HttpClient, private _loadingCtrl: LoadingController, private alertCtrl: AlertController, private _carrosService: CarrosServiceProvider)
{
}
// Método do Ionic chamado quando a View terminou o load (Ciclo de vida da app)
ionViewDidLoad()
{
// Cria o component de loading e salva ele em uma variável
let loadingComponent = this._loadingCtrl.create(
{ content: 'Buscando carros...' }
);
// Mostra o component de loading na tela
loadingComponent.present();
// // Busca os dados dos carros na API usando o HttpClient para fazer a rrequisição HTTP
// this._http.get<Carro[]>('http://localhost:8080/api/carro/listaTodos')
this._carrosService.lista()
.subscribe(
(carros) => {
this.carros = carros;
// Esconde o loading
loadingComponent.dismiss();
},
(err: HttpErrorResponse) => { // caso dê erro na requisição entra aqui. O HttpErrorResponse me ajuda a pegar informações do erro, caso eu precise
console.log(err.status + ' | ' + err.message);
loadingComponent.dismiss();
// Cria um alert para o usuário e exibe ele em tela
this.alertCtrl.create(
{
title: 'Falha na conexão',
subTitle: 'Não foi possível buscar os carros',
buttons: [
{
text: 'Ok'
}
]
}
)
.present();
}
);
}
selecionaCarro(carro: Carro)
{
console.log(carro);
}
}