如何使用 *ngFor 和 *ngIf 遍历多个 tr

Question

这个模板示例

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

Answer 1

尝试使用 ng-container 将不会呈现任何 html，如果 *ngIf 解析为 true[=15，则 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>