从数组中添加DOM中的元素

Question

我有：

<div *ngFor="let item of items">
  <h2>Hello {{item.name}}</h2>
</div>

我的项目：

items = [
    {
      name: 'David',
      star: 5
    },
    {
      name: 'George',
      star: 2
    },
    {
      name: 'Michael',
      star: 0
    },
    {
      name: 'Tim',
      star: 1
    },
]

他们渲染：

Hello Tim

等

如何添加：

<i class="fa fa-star"></i>

h2 在数组中时：

star: 1

等？ 像这样：

if (this.items.star == 2) {
   <i class="fa fa-star"></i>
   <i class="fa fa-star"></i>
}

（这只是一个“if statement”的例子来了解正在发生的事情）

我的PLUNKER： https://plnkr.co/edit/lfZT6FwenhYkQf1MUx9E?p=preview

Answer 1

您可以这样使用*ngIf模板装饰器：

<div *ngFor="let item of items">
  <i class="fa fa-star" *ngIf="item.star === 1></i>
  <h2>Hello {{item.name}}</h2>
</div>

See more examples and read more about it here

  

* ngIf：有条件地包含基于表达式值的模板。