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

快来打我* 2022-05-09 01:22 222阅读 0赞

摘自：[https://www.jianshu.com/p/ff3237a3e7dd][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 - 自定义管道）

[https_www.jianshu.com_p_ff3237a3e7dd]: https://www.jianshu.com/p/ff3237a3e7dd

发表评论取消回复

表情：

评论列表（有 0 条评论，222人围观）

还没有评论，来说两句吧...

相关阅读

相关 script标签在HTML放置位置的区别

原文网址：[script标签在HTML放置位置的区别\_IT利刃出鞘的博客-CSDN博客][script_HTML_IT_-CSDN] 简介说明本文介绍scrip

素颜马尾好姑娘i/ 2023年09月29日 16:16/ 0 赞/ 28 阅读

相关 Element如何解决v-for和v-if不能在一个标签上使用。

在实际开发中碰到了这个问题，然后在网上找了还几个教程，但是没有相应解决，然后突然灵光乍现，解决了这个问题，特此来记录一下。解决思路：我本来想把v-for放在templa

深碍√TFBOYSˉ_/ 2023年09月26日 11:52/ 0 赞/ 82 阅读

相关 Angular指令--ngIf,ngFor,ngStyle,ngClass

Angular指令: \ngIf:相当于if/else,如果有需要写的else数据,就需要定义一个标签去使用 ![在这里插入图片描述][watermark_type

深碍√TFBOYSˉ_/ 2023年02月14日 10:11/ 0 赞/ 29 阅读

相关 C++ - 将模板的声明和定义放置在同一个头文件里

1. 一个类：头文件用于保存类的声明；定义文件保存程序的实现。 2. 分离编译模式：允许在一个编译单元（.cpp文件）中定义函数、类型、类对

蔚落/ 2022年06月16日 07:11/ 0 赞/ 192 阅读

相关 ionic3 post返回的数据不能ngFor

通过post返回的数据进行循环 .ts this.dataInsdustry = data.result; .html <ul> <li n

雨点打透心脏的1/2处/ 2022年05月30日 22:54/ 0 赞/ 130 阅读

相关 ngFor循环体上使用ngIf？

代码如下（错误的使用） <div class="item-list" ngFor="let item of communityList" ngIf="item!=nu

水深无声/ 2022年05月15日 11:43/ 0 赞/ 173 阅读

相关 Angular学习笔记6: 在页面中显示列表（ngFor/ngIf）

页面中显示列表（\ngFor/\ngIf指令的使用）继学习笔记5以后，可以将一个Object对象显示在模版文件中(html) 真正在项目中，数据是来自后端服务器返回的

布满荆棘的人生/ 2022年05月09日 03:48/ 0 赞/ 250 阅读

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

摘自：[https://www.jianshu.com/p/ff3237a3e7dd][https_www.jianshu.com_p_ff3237a3e7dd] 用 ngI

快来打我*/ 2022年05月09日 01:22/ 0 赞/ 223 阅读

相关 QT QChart放置在窗口上的方式

首先放着连接，之后逐步补充 [https://blog.csdn.net/qq\_31073871/article/details/82987524][https_blog.c

水深无声/ 2022年03月09日 01:00/ 0 赞/ 400 阅读

相关 input type=file不能重复上传同一个文件

一、问题上传文件用的H5：input type=file，事件用的 change；问题出在，如果上传的第一个文件是 '一站式.txt‘’，之后再上传同一个文

墨蓝/ 2021年08月04日 13:16/ 1 赞/ 709 阅读