无法组合* ngFor和* ngIf

时间:2018-04-23 06:04:17

标签: angular

我需要将* 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>

我收到以下错误:

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

为前缀的属性

那你怎么做呢?

1 个答案:

答案 0 :(得分:2)

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

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