1
votes

Angulaire 7: * ngFor avec un composant et en passant des paramètres variables

J'ai un élément de portfolio qui est utilisé dans un composant parent, web-portfolio.html, qui récupère des données à partir de web-portfolio.ts.

J'essaie de transmettre des données à partir d'un tableau dans le web-portfolio .ts dans une boucle * ngFor.

<div class = "portfolio-item">
  <div class = "portfolio-thumb">
    <a (click) = "this.isOpen = !this.isOpen">
      <img src = "" alt = ""/>
    </a>
  </div>
  <div class = "portfolio-full" [ngClass] = "{'port-show':this.isOpen}">
    <div class = "portfolio-full-image" (click) = "this.isOpen = !this.isOpen">
      <img src = "{{this.img}}">
      <div class = "portfolio-description">
        {{this.description}}
      </div>
    </div>
  </div>
</div>

Le composant app-portfolio a des entrées pour ceux-ci:

export class WebPortfolioComponent implements OnInit {
 sites = [
    {
     "name":"Site A",
     "description": "Lorem Ipsum",
      "img":"/web/sitea.png",
      "link":"http://sitea.com"
    },
    {
     "name":"Site B",
     "description": "Lorem Ipsum",
      "img":"/web/siteb.png",
      "link":"http://siteb.com"
    },
   {
     "name":"Site C",
     "description": "Lorem Ipsum",
      "img":"/web/siteC.png",
      "link":"http://siteC.com"
    },
  ];
}

 // OUTPUT => Blank, blank, blank

Mais au lieu d'obtenir la sortie correcte, je reçois trois de la valeur initiale du tableau;

export class PortfolioComponent implements OnInit {

  isOpen: boolean = false;
  @Input() name: string;
  @Input() img: string;
  @Input() description: string;
  @Input() link: string;

}

Qu'est-ce que je fais mal?

portfolio.component.html:

<app-portfolio *ngFor = "let site of this.sites" name = "site.name" img = "site.img" description = "site.description" link = "site.link"></app-portfolio>

angular ngfor

6 commentaires

Partagez le code HTML de PortfolioComponent .

Est-ce une faute de frappe d'écrire nom et non [nom] ?

Ni le nom ni [nom] ne semblent fonctionner. Laquelle est correcte, [nom]? @pindev

@Samuel Done. On dirait qu'à l'origine il y avait des images et du texte alternatif là-dedans; maintenant, je n'ai plus que trois blancs.

Il doit s'agir de name = "{{site.name}}" ou [name] = "site.name"

Votre code semble correct lorsque vous modifiez votre code html en tant que commentaire de @ pindev. Je me demandais si la valeur des sites avait été modifiée quelque part. Essayez d'écrire

{{sites | json}}

dans votre html pour en afficher la valeur. Et vous n'avez pas besoin d'écrire ceci. en html. Vous pouvez simplement utiliser img , name et etc.

3 Réponses :

2
votes

Vous devez ajouter {{}} pour le composant de propriété name = "{{site.name}}"

<app-portfolio *ngFor = "let site of this.sites" name = "{{site.name}}" 
 img = "{{site.img}}" description = "site.description" link = "site.link"></app-portfolio>

https://stackblitz.com/edit/angular-ns1qli

La mise à jour de votre HTML fonctionnait toujours p>

https://stackblitz.com /edit/angular-input-parameter?file=src/app/portfolio.html

2 commentaires

Cela ne semble pas faire de différence, malheureusement

On dirait que j'ai fait une erreur en omettant l'image src dans le HTML. Merci pour votre démo!

0
votes

Le img est un attribut html, il ne peut donc pas être utilisé avec @Input donc veuillez utiliser [image] à la place, veuillez vérifier ce qui suit exemple.

Démo Stack Blitz < / p>

0 commentaires

1
votes

Enveloppez simplement le composant comme une liaison de propriété dans Angular

<app-portfolio *ngFor = "let site of this.sites" [name] = "site.name" [img] = "site.img" [description] = "site.description" [link] = "site.link"></app-portfolio>

0 commentaires