【Angular】angular2+中没有*ngShow/ng-show，取而代之的是hidden

最新推荐文章于 2022-04-02 14:56:18 发布
最新推荐文章于 2022-04-02 14:56:18 发布
阅读量3.1k 收藏 1
点赞数 2
文章标签： angular css隐藏元素 hidden ng-show ngShow
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ann295258232/article/details/121476436
版权
这篇博客介绍了在Angular12中如何使用hidden属性来代替Angular1版本的ng-show来隐藏元素。作者指出，虽然没有ng-show指令，但可以通过反转逻辑使用hidden属性实现相同效果。例如，当favoriteHero为非true时，通过[hidden]=!favoriteHero可以隐藏元素。此变化对于熟悉AngularJS的开发者来说是个需要注意的更新。

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

场景

之前写过angularjs，就是1版本的angular，用过ng-show，然后我在angular12中也想通过css样式来隐藏元素，结果发现根据*ngIf的惯性写*ngShow时报错，也没有ng-show，要想实现这个功能则要通过hidden属性

关于hidden

使用hidden时的逻辑跟ng-show或者vue里的v-show相反即可，如下：

<h3 [hidden]="!favoriteHero">
  Your favorite hero is: {{favoriteHero}}
</h3>

如果favoriteHero变量不是true则元素被隐藏

参见官方文档

关于 AngularJS 与 Angular 概念的快速参考

在这里插入图片描述

UG\NX二次开发 多少词汇量才能无障碍阅读开发帮助
王牌飞行员_里海的博客
04-24 2413
大家都知道UFUN的帮助是英文的，有的开发者抱怨看不懂，还有的开发者为了能看懂接口说明专门学英语，那么英语学成什么程度就能无障碍阅读接口文档？我比较好奇，所以专门将UF_MODL部分的ufun函数的接口说明，提取出单词以作统计。大家猜一猜无障碍阅读UF_MODL部分的内容，需要多少词汇量储备呢？
2022年最新前端面试题（大前端时代来临卷起来吧小伙子们..持续维护走到哪记到哪）
m0_55613022的博客
02-24 3437
HTML和Css部分 1、对BFC规范（块级格式化上下文）的理解 BFC 块级格式化上下文 一块独立的区域，有自己的规则，bfc中的元素与外界的元素互不影响 BFC是一块用来独立的布局环境，保护其中内部元素不受外部影响，也不影响外部。 怎么触发BFC 1. float的值left或right 2. overflow的值不为visible（默认） 3. display的值为inline-block、table-cell、table-caption 4. position的值为absolute（绝对定位）或f
AngularJS之ng-show指令
游海东的技术专栏
11-06 4618
1、问题背景     AngularJS的ng-show指令，当值为true，HTML元素显示；当值为false，HTML元素隐藏2、实现源码 AngularJS之ng-show指令 查询 老鼠 猫 {{flag}} 3、实现源码（1）勾选复选框        勾选复选框，按钮显示，单选框隐藏     （2）取消勾选复选框
『AngularJS』ngShow
weixin_30765475的博客
12-09 194
原文 描述 ngShow指令显示或隐藏给定的基于标明ngShow属性的HTML元素。元素的显示或隐藏通过在元素上移除或添加ng-hide CSS类属性。“.ng-hide”CSS类预定义在AngularJS中并设置显示样式为none。 <!-- when $scope.myValue is truthy (element is visible) --> <div ng-sh...
angular2显示与隐藏 *ngIf [hidden]
小武的博客
04-02 2378
1. *ngIf是直接删掉相关的div echartVisable=true <div *ngIf="echartVisable">显示</div> <div *ngIf="!echartVisable">删除</div> 2. [hidden]只是隐藏，div还在 echartVisable=true <div [hidden]="!echartVisable">显示</div> <div...
[转贴]有关Angular 2.0的一切
weixin_34354945的博客
11-25 243
对Angular 2.0的策略有疑问吗？就在这里提吧。在接下来的这篇文章里，我会解释Angular 2.0的主要特性区域，以及每个变化背后的动机。每个部分之后，我将提供自己在设计过程中的意见和见解，包括我认为仍然需要改进设计的重要部分。 注意：本文所反映是2014年11月6日的状态记录。如果你在较长时间之后读到此文，请检查一下我设计上是否有所变更。 AngularJS 1.3 在开始...
不要（不建议）在Angular项目中使用hidden属性
justforuse的博客
12-03 9401
如果想要隐藏某个DOM元素，在AngularJS中可以使用ng-show, ng-hide, 或者ng-if。Angular中其实使用了HTML原生的hidden属性进行元素显示隐藏，hidden属性其实是为元素添加了display: none样式。 但问题在于如果这个元素被赋予了其他样式比如display: block之类的，那么他就会覆盖掉hidden样式，导致元素无法隐藏。AngularJ...
----- 前端面试题 -----
weixin_53170812的博客
07-30 744
HTML5新增的元素 首先html5为了更好的实践web语义化，增加了header，footer，nav,aside,section等语义化标签，在表单方面，为了增强表单，为input增加了color，emial,data ,range等类型，在存储方面，提供了sessionStorage，localStorage,和离线存储，通过这些存储方式方便数据在客户端的存储和获取，在多媒体方面规定了音频和视频元素audio和vedio，另外还有地理定位，canvas画布，拖放，多线程编程的web worker和w
vuejs中的组件以及父子组件间通信传值
itclanCoder
05-10 1567
虽互不曾谋面,但希望能和你成为笔尖下的朋友以读书,技术,生活为主,偶尔撒点鸡汤不作,不敷衍,意在真诚吐露,用心分享点击左上方,可关注本刊(您有任何疑问,都可以进行提问,我们一起探讨)前言...
前端面试题
weixin_55849309的博客
07-09 456
前端面试题汇总 css系列 1、什么是盒子模型？ 在网页中，一个元素占有空间的大小由几部分构成，其中包括元素的内容（content），元素的内边距（padding），元素的边框（border），元素的外边距（margin）四部分，这四个部分占有的空间中，有的部分可以显示相应的内容，而有的部分只能用来分隔相邻的区域，4部分一起构成了css中的元素的盒模型。 2、行内元素有哪些？块级元素有哪些？空（void）元素有哪些？ 行内元素：a、b、span、em 行内块元素：img 块级元素：div 、ul 、li、d
AngularJS基础 ng-show 指令简单示例
12-29
AngularJS ng-show 指令 AngularJS 实例 复选框选中时显示部分内容: <!DOCTYPE html> <html> <head> <meta charset=utf-8> [removed][removed] </head> <body ng-app=> 显示 HTML: <input type=checkbox ng-model=myVar> <div ng-show=myVar> <h1>Welcome</h1>
举例详解AngularJS中ngShow和ngHide的使用方法
12-12
今天我们来看看怎样使用Angular的ngShow 和ngHide   指令来完成它们听起来应该完成的，显示和隐藏！ 它们应该做的事 ngShow 和ngHide 允许我们显示或隐藏不同的元素。这有助于创建Angular应用时因为我们的单页程序会有许多的移动部件随着应用状态的改变而来来去去。 这些指令的最伟大的部分就是我们不必使用CSS或者JS来操作显示还是隐藏。这些都是由老练的Angular来完成。 用法 想使用ngShow 或ngHide, 只需将指令添加到你想要显示或者隐藏的元素上即可。   <!-- FOR BOOLEAN VALUES ======================
AngularJS ng-show指令
iBenxiaohai123的博客
08-24 460
ng-show指令 案例：复选框选中时显示部分内容 显示 HTML: Welcome Welcome to my home. 定义：ng-show 指令在表达式为 true 时显示指定的 HTML 元素，否则隐藏指定的 HTML 元素
AngularJS的ng-show使用
qq_25775675的博客
05-20 768
<li class="third-menu" ng-repeat="thirdMenu in secondMenu.thirdMenus" ng-show="thirdMenuFilter(thirdMenu)"> <a id="thirdMenu{{thirdMenu.id}}" ng-click="clickThirdMenu(thirdMenu)">{{thirdMenu.name}}</a> </li> $scope.thirdMenuFilter
angularJs中的ng-show指令
泠泠似水
05-27 1367
单选框选定控制ng-show的显示和隐藏ng-show="status==0" //ng-show里可以写表达式，该表达式意思是：status值为0的时候，该区域显示。<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <script src="angular.min.js"></script> </head>
angular中[hidden]="expression"注意事项
weixin_30896511的博客
09-04 485
[hidden]="expression",右侧的表达式尽量使用布尔值；虽然比较运算符也可以达到效果，但时常会出现一些莫名其妙的错误。 转载于:https://www.cnblogs.com/lishidefengchen/p/7472594.html...
AngularJS 指令之 ng-hide/ng-show
weixin_30236595的博客
09-24 474
用途 ng-hide/ng-show属性用来控制页面内元素的显示或隐藏。 ng-hide条件为true时，隐藏所在元素；false，则显示所在元素。 ng-show正好相反。true时，显示所在元素；false，则隐藏所在元素。 用法 <!-- when $scope.myValue is truthy (element is visible) --> <di...
AngularJS入门（用ng-hide指令实现元素显示和隐藏）
weixin_34307464的博客
10-29 570
为什么80%的码农都做不了架构师？>>> ...
Angular 2+中的ngShow和ngHide等效于什么？
CHCH998的博客
04-30 899
I have a number of elements that I want to be visible under certain conditions. 在某些条件下，我希望看到一些元素。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值