Solucionado (ver solução)
Solucionado
(ver solução)
11
respostas

Não aparece a lista de carros

olá professor fiz exatamente o que foi pedido, porém não aparece a lista de carros. OBS:não está com nenhum erro

11 respostas

Opa, Bruno! Cole aqui a classe e o template da sua página para eu dar uma olhada!

ok desculpa ai kk

Opa, Bruno! O seu código ficou sem nenhuma formatação! Com o texto desse jeito fica inviável poder te ajudar! Vc poderia corrigir a sua última mensagem ou postá-la novamente com a formatação correta? Lembrando que no canto superior esquerdo da caixa de envio da mensagem, há um botão "inserir código" para que vc possa enviar seus códigos com a formatação correta. Basta que para isso vc clique nele e cole o código no lugar indicado.

Grande abraço e bons estudos, meu aluno!

Home.ts

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import {Carro} from  '../../modelos/carro';
import {HttpClient} from '@angular/common/http';

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

  public carros: Carro[] ;


  constructor(public navCtrl: NavController,
     private _http: HttpClient) {

         this. _http.get<Carro[]>('http://localhost:8080/api/carro/listaTodos')
            .subscribe(
             (carros)=>{
              this.carros =carros;
             }
          );

  }
}

App.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';

import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';

import { HttpClientModule } from '@angular/common/http';

@NgModule({
  declarations: [
    MyApp,
    HomePage
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    HttpClientModule,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}

Bruno, no app.module.ts a declaração do HttpClientModule deve ser feita apenas na seção de imports. Retire a declaração que vc fez na seção de providers.

Outra coisa, ficou faltando o código que eu pedi do template (HTML) da sua página de listagem de carros.

pagina home

<ion-header>
  <ion-navbar>
    <ion-title>
      Alura Car
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <ion-list>
        <ion-item *ngFor="let carro of carros">
        <h2>{{carro.nome}}</h2> 
         <p>R${{carro.preco}}</p> 
        </ion-item>
  </ion-list>  
</ion-content>

Quando vc acessa no seu navegador a URL http://localhost:8080/api/carro/listaTodos, o que acontece?

Desculpa, Eu possivelmente desliguei o servidor, como faço para executar dois server's ao mesmo tempo?

solução!

Quando vc disse que aparecia os dados no navegador eu já estava imaginando ser um problema de "forças ocultas" agindo no seu projeto pq o código está aparentemente todo correto! hahahaha

Meu aluno, vc precisará abrir duas janelas da ferramenta de linha de comando do seu sistema operacional. Numa delas vc vai rodar o projeto Ionic com ionic serve --lab e na segunda janela vai rodar a API com npm start.

obrigado e desculpe a falta de atenção !

Por nada, Bruno! Sempre que tiver qualquer dúvida é só mandar aqui no fórum!

Grande abraço e siga pela luz, meu aluno! Bons estudos!

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