Angular5 *ngIf 和 hidden 的区别

问题

项目中遇到一个问题,有一个过滤查询的面板,需要通过一个展开折叠的button,来控制它的show 和 hide。这个面板中,有一个Select 组件,一个 input 查询输入框。

725304-20181204101828506-174840323.png

原来代码是:

<div class="accordion-content" *ngIf="showFilter"><div class="pTop"><div app-choosen-select [options]="selectCompOptions" (selectedDataChange)="onFilterChange($event)" class="cpu-select"></div></div><div class="form-group"><input type="text" placeholder="查询" [(ngModel)]="searchTxt" (ngModelChange)="searchNode()"></div>
</div>

然后发现,每次点击 toggle button,都会触发一次onFilterChange()事件,因为 app-choosen-select 组件在初始化时会触发传入的 selectedDataChange 事件。从而影响到预期的结果。

解决方案

将 `*ngIf` 改成 `hidden`。
<div class="accordion-content" [hidden]="!showFilter"><div class="pTop"><div app-choosen-select [options]="selectCompOptions" (selectedDataChange)="onFilterChange($event)" class="cpu-select"></div></div><div class="form-group"><input type="text" placeholder="查询" [(ngModel)]="searchTxt" (ngModelChange)="searchNode()"></div>
</div>

What is the difference between *ngIf and [hidden]?

参考:https://stackoverflow.com/questions/43034758/what-is-the-difference-between-ngif-and-hidden

ngIf is a structural directive, it creates/destroys content inside the DOM. The [hidden] statement just hides/shows the content with css, i.e. adding/removing display:none to the element's style.

也就是,*ngIf=true 时,会重新创建其内部的 DOM 元素包括子组件,同时如果设置了数据绑定、事件绑定,也会重新绑定;*ngIf=false 时,会销毁其内部的DOM 元素和子组件,也会销毁绑定的数据和绑定的事件。

但是,[hidden]=true,只是隐藏了DOM元素和子组件,并没有重新初始化,绑定的数据和事件都还在的。

So [hidden] is better used when we want the show/hide status to change frequently, for example on a button click event, so we do not have to load the data every time the button is clicked, just changing its hidden attribute would be enough.
Note that the performance difference may not be visible with small data, only with larger objects.

所以,在这样的toggle 某一个元素的情况下,使用[hidden] 比较好。

转载于:https://www.cnblogs.com/liulei-cherry/p/10062680.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/450466.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

ZooKeeper学习-- Zookeeper简单介绍

前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到教程。 一、分布式协调技术 在给大家介绍ZooKeeper之前先来给大家介绍一种技术——分布式协调技术。那么什么是分布式协调技术&#xff1f;那么…

面试题-线程

1.什么是线程 &#xff1f;线程和进程的区别 &#xff1f; 线程是操作系统能够进行运算调度的最小单位&#xff0c;它被包含在进程之中&#xff0c;是进程中的实际运作单位。而进程是系统中 正在运行的一个程序&#xff0c;程序一旦运行就是进程。 区别&#xff1a;&#xf…

区块链入门教程

前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到教程。 区块链&#xff08;blockchain&#xff09;是眼下的大热门&#xff0c;新闻媒体大量报道&#xff0c;宣称它将创造未来。 可是&#xf…

响应式面包屑菜单

在线演示 本地下载 转载于:https://www.cnblogs.com/qixidi/p/10064991.html

5个能提高你工作效率的Excel技巧

Excel的应用在工作中还是十分广泛的&#xff0c;那么下面小编就来为大家分享5个Excel技巧来帮助大家轻松提高工作效率。1. 不用数据验证或数据有效性&#xff0c;自动生成下拉列表方法&#xff1a;按【Alt↓】组合键注意点&#xff1a;光标要定位在已有数据区域的下一个单元格&…

正则介绍_grep

2019独角兽企业重金招聘Python工程师标准>>> 10月16日任务 9.1 正则介绍_grep上 9.2 grep中 9.3 grep下 grep基本用法 grep [-cinvABC] word filename centos7.x版本的grep实则为grep --colorauto-c 显示匹配到的行数[rootlocalhost ~]# cp /etc/passwd /tmp [rootl…

Python实现Adaboost

1.Adaboost概念 提升方法的思路是综合多个分类器&#xff0c;得到更准确的分类结果。 即“三个臭皮匠顶个诸葛亮”。《统计学习方法》称AdaBoost是提升算法的代表&#xff0c;所谓提升算法&#xff0c;指的是一种常用的统计学习方法&#xff0c;应用广泛且有效。在分类问题中&a…

android studio : clang++.exe: error: invalid linker name in argument '-fuse-ld=bfd

公司jenkins上的C编译器最近换成了clang&#xff0c;今天更新了代码发现本地的C/C代码用NDK编译不过了&#xff0c;提示&#xff1a; “clang.exe: error: invalid linker name in argument -fuse-ldbfd” 解决办法&#xff1a; 将Android.mk文件中的“LOCAL_LDFLAGS -fuse-ld…

(1)初始化项目

2019独角兽企业重金招聘Python工程师标准>>> &#xff08;1&#xff09;初始化项目 1 使用vue-cli初始化项目 vue init webpack my-renren得到以下输出&#xff1a; ? Project name my-renren ? Project description A Vue.js project ? Author neumeng <4048…

使用SpringBoot yml配置文件

前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到教程。 1.上一次我们已经使用SpringBoot实现了一个简单的HelloWord程序&#xff0c;辣么接下来我们简单的使用一下他的yml格式的配置文件。 2.在…

软件行业资讯

为什么只有设计师才能发明流行的新语言 先回顾一下知名编程语言的作者和创造时间&#xff1a;Fortran 语言&#xff0c;50年代&#xff0c;IBM 研究员&#xff1b;Lisp 语言&#xff0c;50年代&#xff0c;MIT 的教授和学生&#xff1b;C语言&#xff0c;70年代&#xff0c;贝尔…

电子科大软件系统架构设计——软件建模详细设计

文章目录 软件建模详细设计概述软件建模详细设计目标软件建模详细设计原则开闭原则里氏 (Liskov) 替换原则依赖倒置原则接口分离原则单一职责原则最少知识原则&#xff08;迪米特法则&#xff09;高内聚原则松耦合原则可重用原则 软件建模详细设计内容 UML 软件静态结构视图建模…

120分钟React快速扫盲教程

在教程开端先说些题外话&#xff0c;我喜欢在学习一门新技术或读过一本书后&#xff0c;写一篇教程或总结&#xff0c;既能帮助消化&#xff0c;也能加深印象和发现自己未注意的细节&#xff0c;写的过程其实仍然是一个学习的过程。有个记录的话&#xff0c;在未来需要用到相关…

微信小程序 悬浮按钮

2019独角兽企业重金招聘Python工程师标准>>> 效果视频 https://pan.baidu.com/s/1yfrDaG9YAX0--v0EA3awZA 布局需要按照圆形排列&#xff0c;所以我们需要计算每个点的坐标 代码部分 <view styleposition:fixed; wx:for"{{list}}" wx:for-index"i…

Micronaut教程:如何使用基于JVM的框架构建微服务

\本文要点\\Micronaut是一种基于jvm的现代化全栈框架&#xff0c;用于构建模块化且易于测试的微服务应用程序。\\tMicronaut提供完全的编译时、反射无关的依赖注入和AOP。\\t该框架的开发团队和Grails框架的开发团队是同一个。\\tMicronaut框架集成了云技术&#xff0c;服务发现…

解决Coldfusion连接MySQL数据库的问题

在连接MySQL时&#xff0c;出现了如下错误&#xff1a; Connections to MySQL Community Server are not supported. Please contact MySQL to obtain a MySQL Enterprise or Commercial version. 解决方案&#xff1a; step 1: download the JDBC driver JDBC Driver for MySQ…

C语言union关键字

union 关键字的用法与struct 的用法非常类似。union 维护足够的空间来置放多个数据成员中的“一种”&#xff0c;而不是为每一个数据成员配置空间&#xff0c;在union 中所有的数据成员共用一个空间&#xff0c;同一时间只能储存其中一个数据成员&#xff0c;所有的数据成员具有…

Python学习第一天-第2节

*本节课内容参见&#xff1a;https://www.cnblogs.com/jin-xin/articles/7459977.html运行第一个Python程序 print(hello world) 将文本文件保存为以.py结尾的文件&#xff0c;如hello_world.py &#xff0c;在终端中&#xff0c;运行命令&#xff1a;Python hello_world.py&am…

JDK1.8使用Dubbo时需注意

2019独角兽企业重金招聘Python工程师标准>>> Dubbo自带的很多包都比较旧了&#xff0c;其中的javassist在JDK1.8上运行会报错 而且错误通常比较诡异&#xff0c;javassist是编辑和创建Java字节码的类库&#xff0c;常见的错误会从spring中报出 解决办法&#xff1a;…

深入了解RabbitMQ工作原理及简单使用

深入了解RabbitMQ工作原理及简单使用 RabbitMQ系列文章 RabbitMQ在Ubuntu上的环境搭建深入了解RabbitMQ工作原理及简单使用RabbitMQ交换器Exchange介绍与实践RabbitMQ事务和Confirm发送方消息确认——深入解读使用Docker部署RabbitMQ集群你不知道的RabbitMQ集群架构全解RabbitM…