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

快来打我* 2022-05-09 01:22 203阅读 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 条评论，203人围观）

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

相关阅读

相关不能直接在a标签中发送post请求

问题描述在a标签中使用method="post"试图连接@PostMapping注解 ![请添加图片描述][5c30ad8bc804474e991d7907503d

系统管理员/ 2024年03月31日 09:21/ 0 赞/ 52 阅读

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

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

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

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

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

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

相关 angular *ngFor

<ul> <li ngFor = "let item of mailService.titleArray; index as i;"> {

今天药忘吃喽~/ 2022年05月20日 06:46/ 0 赞/ 138 阅读

相关 ngFor循环体上使用ngIf？

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

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

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

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

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

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

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

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

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

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

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

相关 Angular--*ngFor

前言学习AngularJS，有一个语法是必不可少的，就是`ngFor`，这篇博客就是对`ngFor`总结一下。内容在Angular中，我们经常用到`ngFo

偏执的太偏执、/ 2021年09月27日 08:00/ 0 赞/ 271 阅读

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

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

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