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

_co.selecionaCarro is not a function

erro ao selecionar carro

codigos

home.ts =>

  selecionaCarro(carro: Carro){
    console.log(carro);
    this.navCtrl.push(EscolhaPage, {
      carroSelecionado: carro
    });
  }

escolha.ts =>

  public carro: Carro;

  constructor(public navCtrl: NavController,
     public navParams: NavParams) {
       this.navParams.get('carroSelecionado');
  }

home.html

  <ion-list>
    <ion-item *ngFor="let carro of carros" (click)="selecionaCarro(carro)">
      <h2>{{carro.nome}}</h2>
      <p>R${{carro.preco}}</p>
    </ion-item>
  </ion-list>
8 respostas

Boa noite, Luiz! Como vai?

Vc poderia postar o código completo dos arquivos home.ts e home.html para eu poder dar uma olhada?

<ion-header>
  <ion-navbar>
    <ion-title>
      Aluracar
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <ion-list>
    <ion-item *ngFor="let carro of carros" (click)="selecionaCarro(carro)">
      <h2>{{carro.nome}}</h2>
      <p>R${{carro.preco}}</p>
    </ion-item>
  </ion-list>
</ion-content>
import { EscolhaPage } from './../escolha/escolha';
import { Carro } from './../../modelos/carro';
import { Component } from '@angular/core';
import { NavController, LoadingController, AlertController } from 'ionic-angular';
import { HttpErrorResponse } from '@angular/common/http';
import { CarrosServiceProvider } from '../../providers/carros-service/carros-service';
import { NavLifecycles } from '../../utils/ionic/nav/nav-lifecycles';

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

  public carros: Carro[];

  constructor(public navCtrl: NavController,
    private _loadingCtrl: LoadingController,
    private _alertCtrl: AlertController,
    private _carrosService: CarrosServiceProvider) {}

  ionViewDidLoad() {
    let loading = this._loadingCtrl.create({
      content: 'Carregando carros...'
    });

    loading.present();

    this._carrosService.lista()
              .subscribe(
                (carros) => {
                  this.carros = carros;
                  loading.dismiss();
                },
                (err: HttpErrorResponse) => {
                  console.log(err);

                  loading.dismiss();

                  this._alertCtrl.create({
                    title: 'Falha na conexão',
                    subTitle: 'Não foi possível carregar a lista de carros. Tente novamente mais tarde!',
                    buttons: [
                      { text: 'Ok' }
                    ]
                  }).present();
                }
              );
  }

  selecionaCarro(carro: Carro){
    console.log(carro);
    this.navCtrl.push(EscolhaPage, {
      carroSelecionado: carro
    });
  }


}

Comigo acontece a mesma coisa, porém hora sim, hora não... Não faz sentido nenhum.

Eu continuo a programação e do nada aparece _co.clickListaProduto() não é uma função

HOME

<ion-content>
  <ion-card>
    <img src="../../assets/imgs/Logo_Nome.png"/>
    <ion-card-content>
      <ion-card-title>
        Bem vindo
      </ion-card-title>
      <p>
        Esta versão está em teste e não foi implementado em sua totalidade.
        aso tenha alguma sugestão, reclamação ou solicitação, entre em contato pelo email
      </p>
      <a href="mailto:contato@caldeirainformatica.com.br">contato@caldeirainformatica.com.br</a>
      <button ion-button full (click)="clickListaProduto()">Produtos</button>
    </ion-card-content>
  </ion-card>
</ion-content>

TS

import {Component} from '@angular/core';
import {NavController} from 'ionic-angular';
import {ListaProdutoPage} from "../lista-produto/lista-produto";
import {NavLifecycles} from "../../util/ionic/nav/nav-lifecycles";

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

  constructor(public navCtrl: NavController) {
  }

  ionViewDidLoad() { //Marca o inicio da página, tudo o que estiver aqui, começa antes dos demais itens
    console.log('home')
  }

  clickListaProduto(){
    this.navCtrl.push(ListaProdutoPage);
  }
  testeFuncao(){
    this.navCtrl.push(ListaProdutoPage);
  }
}

Não sei se tem a ver com cache, pois estou fazendo os testes no navegador. Se duvidar eu resolvo sem saber como e ele demora a mostrar, der repente, ainda sem saber como, gero o erro novamente.

Quando gerou o erro, a pagina que recebe deveria abrir ao clicar na função estava assim.

import { Component } from '@angular/core';
import {AlertController, IonicPage, LoadingController, NavController, NavParams} from 'ionic-angular';
import {ProdutoServiceProvider} from "../../providers/produto-service/produto-service";
import {Produto} from "../../modelos/produto";
import {HttpErrorResponse} from "@angular/common/http";

@IonicPage()
@Component({
  selector: 'page-lista-produto',
  templateUrl: 'lista-produto.html',
})
export class ListaProdutoPage {
  public produtos: Produto[];
  constructor(public navCtrl          : NavController,
              private navParams       : NavParams,
              private loadingCtrl     : LoadingController,
              private produtoService  : ProdutoServiceProvider,
              private alertCtrl       : AlertController) {
  }

  ionViewDidLoad() {
    console.log('lista produto');

    //loading de busca de produtos

    let loading = this.loadingCtrl.create({
      content: 'Carregando lista de produtos'
    });

    //iniciando o loading

    loading.present();

    //busca lista de produtos em json

    this.produtoService.lista()
      .subscribe(
        (produtos) => {
          this.produtos = produtos;
          loading.dismiss();
        },
        (error: HttpErrorResponse) => {
          console.log(error);
          loading.dismiss();
          this.alertCtrl.create({
            title: "Erro",
            subTitle: "Verifique sua conexão com a internet. ListaProdutoTS L47",
            buttons: [{
              text: "Ok"
            }]
          })
        }
      );
  }
}
solução!

Boa noite, meus aluno! Como vão?

Como dito por mim nesse tópico aqui do fórum da Alura, a Ionic CLI as vezes dá uns problemas assim! Eu mesmo, durante o curso, enfrento alguns problemas desse tipo e digo que a Ionic CLI se "embananou" e somente atualizo a página.

Olhando o código de vcs, não percebi qualquer problema. Vcs poderiam me dizer se o problema persiste ao atualizar a página e tentar fazer a operação novamente?

Se após atualizar a página tudo funciona, então sigam em frente que é apenas uma ocorrência desse mesmo bug! Talvez nas versões posteriores esse erro seja corrigido pela equipe do Ionic.

Qualquer coisa é só falar!

Espero que estejam curtindo e aproveitando o conteúdo do curso ao máximo!

Grande abraço e bons estudos, meus alunos!

Realmente, percebi que não é só atualizar a pagina mas fechar o serve (CTRL + C) e abrir de novo (ionic serve --lab)

Voltou a funcionar normalmente...

O erro continuava então recebi a dica de colocar o void após o parentese da função.

 selecionaProduto(produto) :void {
    console.log(produto)
  }

Da uma olhada ai Luiz, se resolve no seu. No meu deu certo

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