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

0
votes

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>
1
angularangular5angular6ngforangular-ng-if
what have you tried ? give us more information on how your order object is - CruelEngine
Hi Sangmin, please have a look on stackoverflow.com/help/how-to-ask to make sure that we can help you to solve your problem - yannick
sorry. it's my first Question. so, I'm not good at using stackoverflow yet. but, I solved the problem, using ng-container!!! - Sangmin Kim

1 Answers

3
votes

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>