EDIT: Ceci est un composant Web dans un fichier HTML statique, je n'utilise que Angular pour le compiler.
J'expérimente avec Angular Elements et j'ai créé un composant Web qui est un NgFor simple avec une entrée d'un fichier JSON.
{ "id": 1, "name": "star 1", "image": "https://picsum.photos/id/1059/400/400", "text": "Text about star 1" }
{ "id": 2, "name": "star 2", "image": "https://picsum.photos/id/1060/400/400", "text": "Text about star 2" }
{ "id": 3, "name": "star 3", "image": "https://picsum.photos/id/1061/400/400", "text": "Text about star 3" }
{ "id": 4, "name": "star 4", "image": "https://picsum.photos/id/1062/400/400", "text": "Text about star 4" }
{ "id": 5, "name": "star 5", "image": "https://picsum.photos/id/1063/400/400", "text": "Text about star 5" }
{ "id": 6, "name": "star 6", "image": "https://picsum.photos/id/1064/400/400", "text": "Text about star 6" }
{ "id": 7, "name": "star 7", "image": "https://picsum.photos/id/1065/400/400", "text": "Text about star 7" }
{ "id": 8, "name": "star 8", "image": "https://picsum.photos/id/1066/400/400", "text": "Text about star 8" }
{ "id": 9, "name": "star 9", "image": "https://picsum.photos/id/1067/400/400", "text": "Text about star 9" }
{ "id": 10, "name": "star 10", "image": "https://picsum.photos/id/1068/400/400", "text": "Text about star 10" }
JSON
[
{
"id":1,
"name": "star 1",
"image":"https://picsum.photos/id/1059/400/400",
"text":"Text about star 1"
},
{
"id":2,
"name": "star 2",
"image":"https://picsum.photos/id/1060/400/400",
"text":"Text about star 2"
},
{
"id":3,
"name": "star 3",
"image":"https://picsum.photos/id/1061/400/400",
"text":"Text about star 3"
},
{
"id":4,
"name": "star 4",
"image":"https://picsum.photos/id/1062/400/400",
"text":"Text about star 4"
},
{
"id":5,
"name": "star 5",
"image":"https://picsum.photos/id/1063/400/400",
"text":"Text about star 5"
},
{
"id":6,
"name": "star 6",
"image":"https://picsum.photos/id/1064/400/400",
"text":"Text about star 6"
},
{
"id":7,
"name": "star 7",
"image":"https://picsum.photos/id/1065/400/400",
"text":"Text about star 7"
},
{
"id":8,
"name": "star 8",
"image":"https://picsum.photos/id/1066/400/400",
"text":"Text about star 8"
},
{
"id":9,
"name": "star 9",
"image":"https://picsum.photos/id/1067/400/400",
"text":"Text about star 9"
},
{
"id":10,
"name": "star 10",
"image":"https://picsum.photos/id/1068/400/400",
"text":"Text about star 10"
}
]
Cette sortie dans le navigateur
<div *ngFor="let name of names | keyvalue" (click)="onClick(name)">
{{name.value | json}}
</div
Ce que je veux faire, c'est accéder aux propriétés de cet objet, donc lorsque je clique sur l'un d'entre eux, il met à jour l'img src d'un autre élément avec la source dans la valeur de l'image. p >
Si je retourne au modèle et que j'essaye d'utiliser {{name.value.image}} j'obtiens l'erreur:
La propriété 'image' n'existe pas sur le type 'string'.
Comment puis-je accéder à la valeur de l'image dans cet objet pour pouvoir l'utiliser ailleurs?
Veuillez garder à l'esprit que je compile ceci avec Angular Elements et que je l'utilise dans une page HTML statique. Merci
3 Réponses :
Puisque names est un tableau d'objets, vous n'avez pas besoin d'utiliser keyvalue ici.
Essayez comme ceci:
<div *ngFor="let name of names" (click)="onClick(name)">
{{name.image}}
</div>
Merci mais j'obtiens toujours l'erreur de compilation: la propriété 'image' n'existe pas sur le type 'string'.
Je pense que vous avez besoin de quelque chose comme ceci:
component.ts:
<div *ngFor="let name of names" (click)="setSource(name)">
{{name.image | json}}
</div>
<img [src]="imgSrc" >
et le HTML:
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent {
public names = [
{
"id":1,
"name": "star 1",
"image":"https://picsum.photos/id/1059/400/400",
"text":"Text about star 1"
},
{
"id":2,
"name": "star 2",
"image":"https://picsum.photos/id/1060/400/400",
"text":"Text about star 2"
},
{
"id":3,
"name": "star 3",
"image":"https://picsum.photos/id/1061/400/400",
"text":"Text about star 3"
},
{
"id":4,
"name": "star 4",
"image":"https://picsum.photos/id/1062/400/400",
"text":"Text about star 4"
},
{
"id":5,
"name": "star 5",
"image":"https://picsum.photos/id/1063/400/400",
"text":"Text about star 5"
},
{
"id":6,
"name": "star 6",
"image":"https://picsum.photos/id/1064/400/400",
"text":"Text about star 6"
},
{
"id":7,
"name": "star 7",
"image":"https://picsum.photos/id/1065/400/400",
"text":"Text about star 7"
},
{
"id":8,
"name": "star 8",
"image":"https://picsum.photos/id/1066/400/400",
"text":"Text about star 8"
},
{
"id":9,
"name": "star 9",
"image":"https://picsum.photos/id/1067/400/400",
"text":"Text about star 9"
},
{
"id":10,
"name": "star 10",
"image":"https://picsum.photos/id/1068/400/400",
"text":"Text about star 10"
}
];
public imgSrc = '';
public setSource(name) {
this.imgSrc = name.image;
}
}
Merci. C'est en effet ainsi que cela fonctionnerait s'il ne s'agissait pas d'un composant Web. S'il vous plaît voir ma réponse pour mon explication. Merci
D'accord, alors j'ai réalisé ce que je faisais mal. Comme il s'agit d'un composant Web et que toute chaîne ou objet peut être passé via la propriété html, je ne peux pas savoir quels seront les noms de propriété lors de la compilation du composant en angular. Ainsi names.anything provoquera une erreur lors de la compilation.
La solution était d'émettre tout l'objet via @Output, d'ajouter un eventlistener dans le script html puis de sélectionner la propriété dans l'objet event. J'espère que ce qui suit expliquera clairement ce que j'essayais de réaliser et pourquoi je rencontrais des problèmes.
Votre question n'est pas claire. pouvez-vous l'ajouter stackblitz.com/edit/stackoverflow- 58672441? File = src / app /…
@SudarshanaDayananda C'est génial mais cela fonctionne dans Angular, j'utilise Angular Elements pour créer un composant Web, puis l'inclure dans un fichier html statique.