Angular 7: *ngFor 带有一个组件并传递变量参数

Question

我有一个正在父组件 web-portfolio.html 中使用的投资组合项目，正在从 web-portfolio.ts.

获取数据

我正在尝试在 *ngFor 循环中从 web-portfolio.ts 文件中的数组传递数据。

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

app-portfolio 组件具有以下输入：

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>

Answer 1

您需要为属性组件添加 {{}} 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

Answer 2

img 是一个 html 属性，所以它不能与 @Input 一起使用，所以请使用 [image]，请查看下面的示例。

Stack Blitz Demo

Answer 3

只需像属性那样将组件包装在 Angular

中

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

Angular 7: *ngFor 带有一个组件并传递变量参数

Angular 7: *ngFor with a component and passing variable parameters

angular

ngfor