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

Erro ao instanciar component (Busca por id)

Boa tarde, estou realizando as atividades do curso aplicando em um projeto diferente para pegar mais prática, a estrutura do projeto é bem parecida com a do curso. Eu tenho um component chamado negociacao e outro chamado detalhes-negociacao (esse recebe o id de um determinado valor dentro de negociação).

Quando eu tento instanciar NegociacaoComponent dentro do component de detalhes-negociacao aparece a seguinte mensagem: "Supplied parameters do not match any signature of call target."

E em negociacoes.service aparece a seguinte mensagem quando insiro o Observable<NegociacaoComponent: "A function whose declared type is neither 'void' nor 'any' must return a value."

E por fim, quando eu tento clicar em um item para mostrar os detalhes o console acusa que não pode ler a propriedade 'lista" de undefined.

Antes de iniciar a busca por id essa tela funcionava normalmente, a url aparecia com o id certinho, o problema começou quando tento inserir a busca por id.

Se alguém puder ajudar agradeço desde já :)

6 respostas

Melhor postar o código, com cada parte que você esta com problema.

===== Abaixo o compoente "detahes-negociacao" =====

import { Component } from '@angular/core';
import {Http, Headers} from '@angular/http';
import {ActivatedRoute} from '@angular/router';
import {NegociacaoComponent} from './negociacao.component';
import {NegociacaoService} from '../services/negociacoes.service';
@Component({
  moduleId: module.id,
  selector: 'detalhes',
  templateUrl: `detalhes-negociacao.component.html`
})
export class DetalhesNegociacaoComponent  {

    negociacao: NegociacaoComponent = new NegociacaoComponent(); // erro nessa linha
    service: NegociacaoService;
    route: ActivatedRoute;

    constructor(service: NegociacaoService, route:ActivatedRoute){
      this.route = route;

      this.route.params.subscribe(params =>{
        let id = params['id'];
        console.log(id);

        this.service
        .buscaPorId(id)
          .subscribe(negociacao => this.negociacao = negociacao,
           erro => console.log(erro));

      })
    }

    }

abaixo o service de negociacoes

import {Injectable} from '@angular/core';
import {Http, Headers, Response} from '@angular/http';
import {Component} from '@angular/core';
import {Observable} from 'rxjs';
import {NegociacaoComponent} from '../components/negociacao.component';
import 'rxjs/add/operator/map';


@Injectable()
export class NegociacaoService{
        negociacoes:Object[] = [];
        name: string;
        http: Http;
        headers:Headers;
        url: string = 'https://jsonplaceholder.typicode.com/users';
    constructor(private http: Http){
        console.log('Iniciou...');
        this.http = http;

        this.headers = new Headers();

        this.headers.append('Content-type', 'application/json');

    }

        lista(): Observable<NegociacaoComponent[]>{

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

        buscaPorId(id: string): Observable<NegociacaoComponent> { //erro aqui
            this.http
            .get(this.url + '/' + id)
            .map(res => res.json());

        }
}

Você não pode fazer isso

negociacao: NegociacaoComponent = new NegociacaoComponent();

Não pode dar new em um componente se ele recebe algo pelo construtor. Se você der new, o container do Angular não vai processar os decorators nem suas dependências.

Cole o construtor do componente.

Muito obrigado, o erro em detalhes-component parou agora . abaixo o connstrutor de negociação.component

    constructor(service: NegociacaoService){
      service
      .lista()
      .subscribe(negociacoes => {
        this.negociacoes = negociacoes;
      }, erro => console.log("erro"))
      }

========== Construtor de detalhes-negociacao.component =======

    constructor(service: NegociacaoService, route:ActivatedRoute){
      this.route = route;
      this.service = service;
      this.route.params.subscribe(params =>{
        let id = params['id'];
        console.log(id);

        this.service
        .buscaPorId(id)
          .subscribe(negociacao => this.negociacao = negociacao,
           erro => console.log(erro));

      })
    }

E por fim o service de negociacao que continua com erro:

import {Injectable} from '@angular/core';
import {Http, Headers, Response} from '@angular/http';
import {Component} from '@angular/core';
import {Observable} from 'rxjs';
import {NegociacaoComponent} from '../components/negociacao.component';
import 'rxjs/add/operator/map';


@Injectable()
export class NegociacaoService{
        negociacoes:Object[] = [];
        name: string;
        // http: Http;
        headers:Headers;
        url: string = 'https://jsonplaceholder.typicode.com/users';
    constructor(private http: Http){
        console.log('Iniciou...');
        this.http = http;

        this.headers = new Headers();

        this.headers.append('Content-type', 'application/json');

    }

        lista(): Observable<NegociacaoComponent[]>{

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

        buscaPorId(id: string): Observable<NegociacaoComponent> { // erro: "A function whose declared type is neither 'void' nor 'any' must return a value."
            this.http
            .get(this.url + '/' + id)
            .map(res => res.json());

        }
}

Quando eu tento acessar a rota parametrizada o erro no navegador persiste, agora ele diz que não pode ler subscribe of undefined

solução!

O ideal é você postar a mensagem de erro. Estou tento dificuldade em entender seu código, daí a mensagem do erro completa ajuda.

Mas você já sabe o problema, a linha que esta dando undefined, é porque você esta fazendo subscribe de algo que não existe. Só fazer o tracking no seu code até essa linha e ver o que esta acontecendo.