不能组合 *ngFor 和 *ngIf

Question

我需要将 *ngFor 循环绑定到 div，但我也只需要在满足 *ngIf 条件后才显示它。

但是 Angular 4 不会让你把它们结合起来。

我的代码：

<ion-item class="item-icon-left item-icon-right positive" 
*ngFor="let phone of contact.shared.phones"
*ngIf="phone.phone_number !== ''">
  <i class="icon ion-ios-telephone"></i>
  <small>{{phone.phone_type}} phone</small>
  <br>{{phone.phone_number | tel}}
  <i class="icon ion-android-close" (click)="removePhone($index, phone)"></i>
</ion-item>

我收到以下错误：

一个元素上不能有多个模板绑定。仅使用一个名为“模板”或以 * 为前缀的属性

那你怎么做呢？

Answer 1

将 *ngFor 指令元素包装在 ng-container 中：

<ng-container *ngIf="">
  <ion-item *ngFor=""></ion-item>
</ng-container>