1 pièce(s) jointe(s)
Affichage de données dans des SLIDES
Bonjour,
Je viens vers vous car j'ai un petit problème, je récupère un tableau de données d'une API que j'exploite avec "map" mais l'inconvénient c'est que je n'arrive pas a trouver la solution pour afficher les noms que je récupère dans cette boucle dans mes slides.
Je vous montre que j'arrive bien à récupérer les deux noms dans le console.log :
Pièce jointe 623368
Puis le code de mon fichier ts :
Code:
1 2 3 4 5 6 7 8 9 10 11
| alternativeProducts(categories:any) {
this.http.get('http://127.0.0.1:8001/api/products/liste/'+ categories)
.subscribe((dataApi:any) =>{
// console.log(dataApi);
dataApi.map(p=>{
p.name;
p.description;
})
console.log(dataApi.map(p=>p.name));
})
} |
Ainsi que mon code HTML:
Code:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26
| <div id="accordion">
<ul>
<li>
<input type="checkbox" checked>
<i></i>
<h2>Trouver un produit similaire</h2>
<!-- <ion-card>
<ion-item>
{{nameProduct}}
</ion-item>
</ion-card> -->
<ion-slides [options]="option" margin="ion-margin-top">
<ion-slide>
<ion-card>
{{p.name}}
</ion-card>
</ion-slide>
</ion-slides>
</li>
<li>
<input type="checkbox" checked>
<i></i>
<h2>Blablablabla</h2>
</li>
</ul>
</div> |
En espérant qu'un de vous pourra m'aider.
Bien cordialement,
Alexandre
1 pièce(s) jointe(s)
Afficher une image récupéré d'une API pour chaque produit
Bonjour à tous,
J'ai créé une API qui récupère des données dans une bdd phpmyadmin puis je les envoie sur mon app Angular.
J'affiche ces données dans des slides mais je ne vois pas comment faire pour que l'image s'affiche, pour le moment j'affiche juste le nom de l'image.
Comment faire pour que ce soit l'image qui s'affiche et non le nom ?
fichier ts :
Code:
1 2 3 4 5 6 7 8 9 10 11
| alternativeProducts(categories:any) {
this.http.get('http://127.0.0.1:8001/api/products/liste/'+ categories)
.subscribe((dataApi:any) =>{
this.products = dataApi.map(p=>({
image: p.image,
name: p.name,
description: p.description
}));
console.log(dataApi);
console.log("products", this.products);
}) |
fichier html :
Code:
1 2 3 4 5 6 7
| <ion-slides [options]="option" margin="ion-margin-top">
<ion-slide *ngFor="let product of products">
{{ product.image}}
{{ product.name }}
{{ product.description}}
</ion-slide>
</ion-slides> |
Screen de la page avec la console:
Pièce jointe 623516