CODEWITHSUNDEEP
angularangular5angular6ngforangular-ng-if
Sangmin Kim
Sangmin Kim

Reputation: 47

How to loop over multiple tr's with *ngFor & *ngIf

This sample of the template

<div *ngFor="let order of orders" class="col-1-4">    
  <tr *ngIf="order.user_id===user">

      <td> {{ order.package_id }} </td>
      <td> <img src="{{order.img}}" width="100" height="120"></td>
      <td>{{ order.name }}</td>
      <td>{{ order.price }}</td>
      <td>{{ order.size_i }}</td>
      <td>{{ order.size_s }}</td>
      <td>{{ order.color }}</td>
      <td>{{ order.count }}</td>
      <td>{{ order.order_date | date}}</td>
      <td>{{ order.price * cnt  | currency:'KRW' }}</td>

  </tr>
</div>

Upvotes: 0

Views: 1002

Answers (1)

Muhammed Albarmavi
Muhammed Albarmavi

Reputation: 24472

Try to use ng-container will not render any html and the tr element will be visible if the *ngIf resolves to true

<ng-container *ngFor="let order of orders">
 <tr *ngIf="order.user_id===user">
      <td> {{ order.package_id }} </td>
      <td> <img src="{{order.img}}" width="100" height="120"></td>
      <td>{{ order.name }}</td>
      <td>{{ order.price }}</td>
      <td>{{ order.size_i }}</td>
      <td>{{ order.size_s }}</td>
      <td>{{ order.color }}</td>
      <td>{{ order.count }}</td>
      <td>{{ order.order_date | date}}</td>
      <td>{{ order.price * cnt  | currency:'KRW' }}</td>
  </tr>
</ng-container>

Upvotes: 4

Related Questions