从数组追加DOM中的元素

Question

I have:

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

My items:

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

They render:

Hello Tim

etc.

How to add:

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

above h2 when in array:

star: 1

etc? Something like this:

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

(It's just an example "if statement" to understand what's going on)

My PLUNKER: https://plnkr.co/edit/lfZT6FwenhYkQf1MUx9E?p=preview

Answer 1

You can use the *ngIf template decorator this way:

<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: Conditionally includes a template based on the value of an expression.