如何使用 *ngFor 和 *ngIf 循环多个 tr答案

【问题标题】：How to loop over multiple tr's with *ngFor & *ngIf如何使用 *ngFor 和 *ngIf 循环多个 tr
【发布时间】：2019-06-12 11:26:05
【问题描述】：

此模板示例

<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>

【问题讨论】：

你试过什么？向我们提供有关您的订单对象的更多信息
您好，Sangmin，请查看stackoverflow.com/help/how-to-ask，以确保我们可以帮助您解决问题
对不起。这是我的第一个问题。所以，我还不擅长使用stackoverflow。但是，我用 ng-container 解决了这个问题！！！

标签： angular angular5 angular6 ngfor angular-ng-if

【解决方案1】：

尝试使用ng-container 不会呈现任何html，如果*ngIf 解析为true，tr 元素将可见

<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>

【讨论】：