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

最新推荐文章于 2025-05-12 14:37:59 发布

chelen_jak

最新推荐文章于 2025-05-12 14:37:59 发布

阅读量6.3k

点赞数 1

分类专栏： Ionic3 Angular2 实用

实用同时被 3 个专栏收录

738 篇文章

订阅专栏

Ionic3

175 篇文章

订阅专栏

Angular2

139 篇文章

订阅专栏

本文介绍在Angular框架中如何正确使用ngFor和ngIf指令，避免两者在同一元素上的冲突。通过使用ng-container标签，可以有效解决这一问题，同时提供了自定义管道作为另一种解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

摘自：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 - 自定义管道）