Angular 7：带有组件并传递可变参数的 *ngFor答案

【问题标题】：Angular 7: *ngFor with a component and passing variable parametersAngular 7：带有组件并传递可变参数的 *ngFor
【发布时间】：2019-11-07 22:14:22
【问题描述】：

我有一个在父组件 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>

【问题讨论】：

分享PortfolioComponent的HTML代码。
写name 不是[name] 是错字吗？
name 和 [name] 似乎都不起作用。哪个是正确的，[姓名]？ @pindev
应该是name="{{ site.name }}" 或[name]="site.name"
当您将 html 代码更改为 @pindev 的评论时，您的代码看起来是正确的。我想知道sites 的值是否在某个地方发生了变化。尝试在您的 html 中写入 <p>{{ sites | json }}</p> 以打印出它的值。而且你不需要在html中写this.。您可以使用img、name 等。

标签： angular ngfor

【解决方案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

【讨论】：

不幸的是，这似乎没有任何区别
看起来我犯了一个错误，在 HTML 中遗漏了图像 src。感谢您的演示！

【解决方案2】：

只需像 Angular 中的属性绑定一样包装组件

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

【讨论】：

【解决方案3】：

img 是一个 html 属性，因此不能与@Input 一起使用，因此请改用[image]，请查看以下示例。

Stack Blitz Demo

【讨论】：