*ngFor 和 *ngIf 不能放置在同一个标签上

摘自：https://www.jianshu.com/p/ff3237a3e7dd

用 ngIf 指令来晒男性英雄

<ion-list>
    <ng-container *ngFor="let item of data">
      <ion-item *ngIf="item.gender===1">
        <ion-avatar  item-start>
          <img src="{{item.avatar}}">
        </ion-avatar>
        <h2>{{item.name}}</h2>
        <p>{{item.description}}</p>
        <p item-end>{{item.gender?'男':'女'}}, {{2017 - item.birthYear}} 岁</p>
      </ion-item>
    </ng-container>
  </ion-list>

这儿要说明的是，在angular中，*ngFor 和 *ngIf 不能放置在同一个标签上(Vue之类的框架则可以)，因此在 ion-item 外加上一个“虚拟”的标签 ng-container, 它自身不会被渲染到DOM中，只会渲染它包裹的内容（类似Vue中的 template 标签）。因此在没有 ngIf 的情况下，把 ngFor 指令加在 ion-item 上和加在外层的 ng-container 标签上效果是等同的；而在有 ngIf 指令的情况下，可以通过 ng-container标签避免两个指令的冲突。

补充：
当然除了加ng-container标签外，我们还可以通过自定义管道来解决这个问题。
（可参考：《揭秘Angular2》中的P195页 7.5.3 - 自定义管道）

最后

以上就是整齐跳跳糖为你收集整理的*ngFor 和 *ngIf 不能放置在同一个标签上的全部内容，希望文章能够帮你解决*ngFor 和 *ngIf 不能放置在同一个标签上所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。