2

Minha aplicação está funcionando perfeitamente, a única coisa de errado é essado essa mensagem de erro;

MidiaExibirComponent.html:13 ERROR TypeError: Cannot read property 'nome' of undefined
    at Object.eval [as updateRenderer] (MidiaExibirComponent.html:13)
    at Object.debugUpdateRenderer [as updateRenderer] (core.js:14693)
    at checkAndUpdateView (core.js:13807)
    at callViewAction (core.js:14153)
    at execComponentViewsAction (core.js:14085)
    at checkAndUpdateView (core.js:13808)
    at callViewAction (core.js:14153)
    at execComponentViewsAction (core.js:14085)
    at checkAndUpdateView (core.js:13808)
    at callWithDebugContext (core.js:15056)

A linha 13 é essa linha de código;

<td>{{ cotas.USD.nome }}</td>

Esse é minha pagina completa;

<table class="table">
    <thead>
      <tr>

        <th scope="col">Moedas</th>
        <th scope="col">Valor</th>
        <th scope="col">Visualização</th>
      </tr>
    </thead>
    <tbody>
      <tr>

        <td>{{ cotas.USD.nome }}</td>
        <td>{{ cotas.USD.valor }}</td>
        <td>{{ cotas.USD.ultima_consulta }}</td>
      </tr>
      <tr>

          <td>{{ cotas.EUR.nome }}</td>
          <td>{{ cotas.EUR.valor }}</td>
          <td>{{ cotas.EUR.ultima_consulta }}</td>
      </tr>
      <tr>
          <td>{{ cotas.ARS.nome }}</td>
          <td>{{ cotas.ARS.valor }}</td>
          <td>{{ cotas.ARS.ultima_consulta }}</td>
      </tr>
      <tr>
          <td>{{ cotas.GBP.nome }}</td>
          <td>{{ cotas.GBP.valor }}</td>
          <td>{{ cotas.GBP.ultima_consulta }}</td>
      </tr>

      <tr>
          <td>{{ cotas.BTC.nome }}</td>
          <td>{{ cotas.BTC.valor }}</td>
          <td>{{ cotas.BTC.ultima_consulta }}</td>
      </tr>
    </tbody>
  </table>

Esse é o serviço;

import { Midia, Moedas } from './../core/model';

import { Http, Headers, URLSearchParams } from '@angular/http';
import { Injectable } from '@angular/core';

import 'rxjs/add/operator/toPromise';




@Injectable()
export class MidiaService {

  midiasUrl = 'http://localhost:8080/midia/midias';
  quotationURL = 'http://api.promasters.net.br/cotacao/v1/valores?moedas=USD,BTC,EUR,ARS,GBP&alt=json';

  constructor(private http: Http) { }



pesquisarUSD(): Promise<any> {
  return this.http.get(`${this.quotationURL}`)
  .toPromise()
 .then(response => response.json().valores);

}



}

E esse é o componente;

import { MidiaService } from './../midia.service';
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-midia-exibir',
  templateUrl: './midia-exibir.component.html',
  styleUrls: ['./midia-exibir.component.css']
})
export class MidiaExibirComponent implements OnInit {


cotas = [];

  constructor(private midiaService: MidiaService) { }

  ngOnInit() {


      this.pesquisar();
  }

  pesquisar() {
    this.midiaService.pesquisarUSD()
    .then(cotas => this.cotas = cotas);
  }



}

==============================================================

arquivo Json

{
    "status": true,
    "valores": {
        "USD": {
            "nome": "Dólar",
            "valor": 3.408,
            "ultima_consulta": 1523995502,
            "fonte": "UOL Economia - http://economia.uol.com.br/"
        },
        "EUR": {
            "nome": "Euro",
            "valor": 4.2171,
            "ultima_consulta": 1523995502,
            "fonte": "UOL Economia - http://economia.uol.com.br/"
        },
        "ARS": {
            "nome": "Peso Argentino",
            "valor": 0.1691,
            "ultima_consulta": 1523995502,
            "fonte": "UOL Economia - http://economia.uol.com.br/"
        },
        "GBP": {
            "nome": "Libra Esterlina",
            "valor": 4.8704,
            "ultima_consulta": 1523995502,
            "fonte": "UOL Economia - http://economia.uol.com.br/"
        },
        "BTC": {
            "nome": "Bitcoin",
            "valor": 27516,
            "ultima_consulta": 1524047408,
            "fonte": "Mercado Bitcoin - http://www.mercadobitcoin.com.br/"
        }
    }
}

===================================================== Veja código de verificação

.then(response => {
  console.log(response.json().valores);

});
}

resultado do consoles;

inserir a descrição da imagem aqui

=====================================================================

   .then(cotas => {
    console.log(this.cotas = cotas);

  });

inserir a descrição da imagem aqui

Como faço para tirar essa mensagem de erro?

12
  • O problema parte de mostrar nomes de cotas que você não tem, no exemplo da pergunta a cota USD. Tem de tentar ver o que quer fazer nesse caso.
    – Isac
    Commented 18/04/2018 às 12:34
  • @wladyband Qual dos objetos que está como undefined? cotas ou USD?
    – Jéf Bueno
    Commented 18/04/2018 às 14:18
  • @LINQ se você observar meu código cotas é uma variável criada na classe componente do angula e USD faz parte dos atributos vindo da URL json, eu atualizei minha postagem dá uma olhada lá.
    – user10264
    Commented 18/04/2018 às 14:24
  • @wladyband Não seria: <td>{{ cotas.valores.USD.nome }}</td> Commented 18/04/2018 às 14:26
  • 2
    @wladyband fiz um edição na resposta: pt.stackoverflow.com/a/292300/3635
    – Syzoth
    Commented 19/04/2018 às 13:56

4 Respostas 4

5

Eu tive um problema parecido, tenta escrever a linha dessa forma:

<td>{{ cotas?.USD.nome }}</td> ou <td>{{ cotas.USD?.nome }}</td>
1
  • infelizmente não funcionou
    – user10264
    Commented 18/04/2018 às 13:28
2

Tive um problema parecido e para mim, desenvolver um resolver na rota do componente resolveu meu problema.

Implemente uma rota:

exemplo.route.ts:

@Injectable({ providedIn: 'root' })
export class ExemploResolve implements Resolve<any> {
    constructor(private service: ExemploService) {}

    resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<IExemplo> {
        const id = route.params['idExemplo'] ? route.params['idExemplo'] : null;
        if (id) {
            return this.service.find(id).pipe(
                filter((response: HttpResponse<Exemplo>) => response.ok),
                map((exemplo: HttpResponse<Exemplo>) => exemplo.body)
            );
        }
        return of(new Exemplo());
    }
}

export const exemploRoute: Routes = [
    {
        path: '',
        component: ExemploComponent,
        resolve: {
            pagingParams: JhiResolvePagingParams
        },
        data: {
            defaultSort: 'id,asc',
            pageTitle: 'Exemplos'
        },
    },
    {
        path: 'new',
        component: ExemploUpdateComponent,
        resolve: {
            projeto: ExemploResolve
        },
        data: {
          defaultSort: 'id,asc',
          pageTitle: 'Exemplos'
      },
  }
];
1

A resposta do Guilherme pode funcionar, mas vou sugerir uma alternativa:

No seu serviço, deixe o método que faz a requisição retornar um Observable:

import 'rxjs/add/operator/map';
...
pesquisarUSD(): Observable<any> {
   return this.http.get(`${this.quotationURL}`).map(response => response.json().valores);
}

No seu componente, declare o membro cotas como:

import {  share } from 'rxjs/operators';
...
cotasAsync: Observable<{}>;

E no OnInit, busque os dados do serviço assim:

this.cotasAsync = this.midiaService.pesquisar().pipe(share());

E na view, faça a verificação de inicialização do objeto usando o pipe async do Angular:

<table class="table" *ngIf="cotasAsync | async; let cota; else loading">
<thead>
  <tr>

    <th scope="col">Moedas</th>
    <th scope="col">Valor</th>
    <th scope="col">Visualização</th>
  </tr>
</thead>
<tbody>
  <tr>

    <td>{{ cota.USD.nome }}</td>
    <td>{{ cota.USD.valor }}</td>
    <td>{{ cota.USD.ultima_consulta }}</td>
  </tr>
  <tr>

      <td>{{ cota.EUR.nome }}</td>
      <td>{{ cota.EUR.valor }}</td>
      <td>{{ cota.EUR.ultima_consulta }}</td>
  </tr>
  <tr>
      <td>{{ cota.ARS.nome }}</td>
      <td>{{ cota.ARS.valor }}</td>
      <td>{{ cota.ARS.ultima_consulta }}</td>
  </tr>
  <tr>
      <td>{{ cota.GBP.nome }}</td>
      <td>{{ cota.GBP.valor }}</td>
      <td>{{ cota.GBP.ultima_consulta }}</td>
  </tr>

  <tr>
      <td>{{ cota.BTC.nome }}</td>
      <td>{{ cota.BTC.valor }}</td>
      <td>{{ cota.BTC.ultima_consulta }}</td>
  </tr>
</tbody>
</table>

Algumas sugestões: - Se estiver usando o Angular 4 ou superior, passe a usar a classe HttpClient ao invés do Http. A classe Http está obsoleta.

1
  • De qualquer forma teve que ter um *ngIf=, né? Assim, pessoalmente eu acho que o uso de Observable pro caso especifico ficou pra tipo "comprar um tanque pra matar formigas", talvez em situações mais complexas seja interessante, mas para algo que é simples não creio que seja preciso tanto.
    – Syzoth
    Commented 18/04/2018 às 15:21
1

Provavelmente é porque o "view" esta tentando exibir algo que ainda não existe, antes mesmo da requisição HTTP começar:

<td>{{ cotas.USD.nome }}</td>
<td>{{ cotas.USD.valor }}</td>
<td>{{ cotas.USD.ultima_consulta }}</td>

Ou seja, a mensagem:

Cannot read property 'nome' of undefined

Diz que tentou acessar nome de undefined, isto quer dizer que: contas.USD, contas.EUR, etc, são chaves inexistentes dentro do seu objeto this.contas, o que você poderia usar é simplesmente um *ngIf (https://angular.io/api/common/NgIf) para checar se o valor existe:

  <tr *ngIf="cotas.USD">
    <td>{{ cotas.USD.nome }}</td>
    <td>{{ cotas.USD.valor }}</td>
    <td>{{ cotas.USD.ultima_consulta }}</td>
  </tr>

  <tr *ngIf="cotas.EUR">
      <td>{{ cotas.EUR.nome }}</td>
      <td>{{ cotas.EUR.valor }}</td>
      <td>{{ cotas.EUR.ultima_consulta }}</td>
  </tr>

  <tr *ngIf="cotas.ARS">
      <td>{{ cotas.ARS.nome }}</td>
      <td>{{ cotas.ARS.valor }}</td>
      <td>{{ cotas.ARS.ultima_consulta }}</td>
  </tr>

  <tr *ngIf="cotas.GBP">
      <td>{{ cotas.GBP.nome }}</td>
      <td>{{ cotas.GBP.valor }}</td>
      <td>{{ cotas.GBP.ultima_consulta }}</td>
  </tr>

  <tr *ngIf="cotas.BTC">
      <td>{{ cotas.BTC.nome }}</td>
      <td>{{ cotas.BTC.valor }}</td>
      <td>{{ cotas.BTC.ultima_consulta }}</td>
  </tr>

Você também poderia iterar o this.cotas com *ngFor= assim não precisaria ficar fazendo tanta repetição de código usando let cota of cotas, assim cota vai fazer o loop passando pelo USD, EUR, ARS, GBP e BTC:

<table class="table">
    <thead>
      <tr>

        <th scope="col">Moedas</th>
        <th scope="col">Valor</th>
        <th scope="col">Visualização</th>
      </tr>
    </thead>
    <tbody>

      <tr *ngFor="let cota of cotas">
          <td>{{ cota.nome }}</td>
          <td>{{ cota.valor }}</td>
          <td>{{ cota.ultima_consulta }}</td>
      </tr>

    </tbody>
  </table>

Isso ajuda a diminuir bastante o código.

Você deve fazer log-in para responder a esta pergunta.