implementação do home.ts
import { Component } from '@angular/core';
import { Carro } from '../../modelos/carro';
import { HttpClient, HttpErrorResponse } from '@angular/common/http';
import { NavController, LoadingController, AlertController } from '@ionic/angular';
import { CarrosService } from '../services/carros.service';
import { NavLifeCycle } from '../../utils/ionic/nav/nav-lifecycles';
@Component({
selector: 'app-home',
templateUrl: 'home.page.html',
styleUrls: ['home.page.scss'],
providers: [CarrosService]
})
export class HomePage implements NavLifeCycle {
public carros: Carro[];
constructor(public navCtrl: NavController,
private _http: HttpClient,
private _loadingCtrl: LoadingController,
private _alertCtrl: AlertController,
private _CarrosService: CarrosService) {}
ionViewDidLoad() {
this._CarrosService.Listar().subscribe(
async (carros) => {
let loading = await this._loadingCtrl.create({
message: 'Carregando carros...'
});
loading.present();
this.carros = carros;
loading.dismiss();
}, async (err: HttpErrorResponse) => {
const alert = await this._alertCtrl.create({
message: 'Falha na conexão',
subHeader: 'Não foi possível carregar a lista de carros. Tente novamente mais tarde.',
buttons: [
{ text: 'Ok' }
]
});
await alert.present();
}
);
}
}
Implementação do NavLifeCycle
export interface NavLifeCycle {
ionViewDidLoad?(): void;
}
implementação do carros.servise.ts:
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Carro } from '../../modelos/carro';
@Injectable({
providedIn: 'root'
})
export class CarrosService {
constructor(private _Http: HttpClient) { }
Listar() {
return this._Http.get<Carro[]>('http://localhost:8080/api/carro/listaTodos');
}
}
Por favor me ilumine com sua sabedoria professor. grato