Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

Preenchimento da lista

Referente ao curso Ionic 3 parte 1: aplicações híbridas mobile ainda mais poderosas, no capítulo Consumindo a API do cliente e atividade Requisições com o serviço HttpClient

por Marcos Vinicius da Silva
| 93.6k xp | 3 posts
Estagio

Olá professor. Estou consumindo uma API node, com banco sql server.

minha API retorna, um json dessa forma:

[[
        { "nome": "Azera V6", "preco": 85000.0, "fotos": [`http://${ip}:8080/images/azera-v6-1.jpg`, `http://${ip}:8080/images/azera-v6-2.jpg`, `http://${ip}:8080/images/azera-v6-3.jpg`] },
        { "nome": "BMW Cabrio", "preco": 110000.0, "fotos": [`http://${ip}:8080/images/bmw-cabrio-1.jpg`, `http://${ip}:8080/images/bmw-cabrio-2.jpg`] }
 ]]

Dessa forma não consigo preencher a lista. Poderia me ajudar?

2 respostas
por Marcos Vinicius da Silva
| 93.6k xp | 3 posts
Estagio

consegui resolver dessa forma: 

<ion-content>
  <ion-list *ngFor="let carros of carros">
    <ion-item *ngFor="let carro of carros" (click)="selecionaCarro(carro)"> 
        <h2>{{carro.nome}}</h2>
    </ion-item>
  </ion-list>
</ion-content>
solução!
por Gabriel Leite
| 3485k xp | 5398 posts
Instrutor

Boa noite, meu aluno! Como vai?

O problema é que sua API está retornando um "array de arrays", por isso vc teve que fazer dois *ngFor. Tanto é verdade, que se vc der uma olhada no JSON que vc postou, tem dois colchetes iniciando o JSON e dois colchetes fechando ele. Ou seja, o problema está no código da sua API!

Para não ter que fazer dois *ngFor basta fazer com que sua API retorne um array com os seus objetos.

Qualquer coisa é só falar!

Grande abraço e bons estudos!