Skip to main content
adicionou 737 caracteres ao conteúdo
Fonte Link
Syzoth
  • 100,5mil
  • 23
  • 169
  • 361

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ê 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.

Fonte Link
Syzoth
  • 100,5mil
  • 23
  • 169
  • 361

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>