Angular 7: * ngFor с компонентом и передачей переменных параметров - PullRequest
Новая
       15

Angular 7: * ngFor с компонентом и передачей переменных параметров

0 голосов
/ 26 июня 2019

========

ОБНОВЛЕНИЕ: похоже, мне понадобились две вещи:

  1. Используйте скобки [src] = "someimg.png" или src = "{{someimage.png}} "
  2. Я забыл удалить исходный источник изображения в html, поэтому он показывался для каждой итерации.D'oh!

Спасибо за ответы и комментарии!

========

У меня есть элемент портфолио, который используется вродительский компонент web-portfolio.html, получающий данные из web-portfolio.ts.

Я пытаюсь передать данные из массива из файла web-portfolio.ts в цикл * ngFor.

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

Компонент app-портфолио имеет следующие входные данные: 

export class PortfolioComponent implements OnInit {

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

}

Но вместо правильного вывода я получаю три значения начального массива; 

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

Что я делаю не так?

portfolio.component.html: 

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

Ответы [ 3 ]

2 голосов
/ 26 июня 2019

Вам необходимо добавить {{}} для компонента свойства 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

Обновление для вашего HTML все еще работает

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

1 голос
/ 26 июня 2019

Просто оберните компонент как привязку свойства в Angular 

<app-portfolio *ngFor = "let site of this.sites" [name] = "site.name" [img] = "site.img" [description] = "site.description" [link] = "site.link"></app-portfolio>
0 голосов
/ 26 июня 2019

img является атрибутом html, поэтому его нельзя использовать с @Input, поэтому, пожалуйста, используйте [image], проверьте приведенный ниже пример.

Stack Blitz Demo

...