Angular中的结构指令：ngIf和ngFor的使用详解

最新推荐文章于 2024-02-21 01:30:00 发布
最新推荐文章于 2024-02-21 01:30:00 发布
阅读量397 收藏
点赞数
文章标签： angular.js javascript 前端 js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yabclass/article/details/133676836
版权
js 专栏收录该内容
93 篇文章 1 订阅 ¥59.90 ¥99.00
订阅专栏

结构指令是Angular中的一种特殊指令，用于控制DOM元素的显示和隐藏，或者根据数据集合创建重复的DOM元素。其中，最常用的结构指令是ngIf和ngFor。

  1. ngIf指令：
    ngIf指令用于根据条件来显示或隐藏DOM元素。当条件为真时，元素会被渲染并显示在页面上；当条件为假时，元素会被移除或隐藏。

使用ngIf指令的语法如下：

<element *ngIf="condition">...</element>

其中，element代表要条件显示或隐藏的DOM元素，condition是一个布尔表达式，用于决定元素是否显示。

以下是一个简单的例子。假设我们有一个布

了解本专栏 订阅专栏 解锁全文
YabClass
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
订阅专栏
Angular2内置指令NgFor和NgIf详解
09-01
Directive的概念在Angular 1.x就存在了，我对它的认识比较模糊，所以直接通过一些例子来说明。Angular提供的内置执行有很多，这次使用两个：ngFor、ngIf。
Angular ngFor 便捷用法及解读
Lance1ot的博客
11-12 5246
ngFor 文章目录ngFor便捷用法源码注释ngFor 是什么ngFor 与 DOMngFor 与 trackByngFor 在 ng-template 上的使用方式ngFor 与 $implicit ngFor 在开发使用上已经是比较普遍了，这里主要介绍下一些通常不被关注的便捷用法 便捷用法 ngFor 不仅仅提供了 index 属性（索引属性），还提供了一些实用的对外属性，所有实用对外属性如下： index ：元素索引 first ：是否为第一个元素 last ：是否为最后一个元素 even ：是否
ng-if指令
天马3798
12-14 9798
一、定义和用法 ng-if指令用于在表达式为false时移除html元素。 如果if语句执行结果为true，会添加移除元素，并显示。 ng-if指令不同于ng-hide，ng-hide隐藏元素，而ng-if是从DOM中移除元素。 语法： 参数值 值 描述 expression 如果表达式返回 false 则会移除整个元素，如果为 tru
Angular 中的 ngFor 指令
最新发布
rubys007的博客
02-21 304
您还可以为以下导出值设置局部变量：index、first、last、even 和 odd。index 将返回当前循环索引，而其他值将提供一个布尔值，指示该值是 true 还是 false。
技术宅小伙：Angular入门 - ngIf和ngFor介绍
2301_76992670的博客
04-05 937
以上就是管道的一个最基本的用法。这个例子中，我们只是展示了一个非常简单的使用方法，实际上，管道的功能非常强大，我们可以通过自定义管道来实现更加复杂的转换功能。这个例子中，我们只是展示了一个非常简单的使用方法，实际上，管道的功能非常强大，我们可以通过自定义管道来实现更加复杂的转换功能。里面加一个变量来获取当前item的索引，然后我们在这里判断就是如果这个索引是偶数的话，我们就去展示这个item。里面加一个变量来获取当前item的索引，然后我们在这里判断就是如果这个索引是偶数的话，我们就去展示这个item。
AngularJS ng-if使用
我的博客
03-15 502
ng-if指令不同于ng-hide，ng-hide隐藏元素，而ng-if是从DOM中移除元素。如果if语句执行结果为true，会添加元素，并显示。ng-if指令用于在表达式为false时。
对angular2中的ngfor和ngif指令嵌套实例讲解
10-18
今天小编就为大家分享一篇对angular2中的ngfor和ngif指令嵌套实例讲解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
angular-hola-mundo:ngFor y ngFor
04-08
我的应用程式 该项目是使用版本9.1.1生成的。 开发服务器 为开发服务器运行ng serve 。... 如果您更改任何源文件，该应用程序将自动重新加载。...要获得有关Angular CLI的更多帮助，请使用ng help或查看 。
Angular中的内置指令和自定义指令
02-01
How：指令主要分为两种：内置指令和自定义指令，通过下面的例子，简单记录一下如何去使用。在官方API文档上罗列了很多指令，内置指令可以分为：普通指令和事件指令，他们都是作用于HTML之上的，通过添加属性的方式来...
Angular 组件模版代码里使用 ngIf 进行条件渲染的例子
SAP 资深技术专家 Jerry Wang 的技术分享
12-09 414
如果没有库存，那么这个添加到购物车的按钮就没有存在的必要，因为用户无法添加没有库存的商品到购物车。可能是一个组件的属性，代表当前的选项中是否要显示添加到购物车的按钮。在这个 Angular 项目中，这个按钮被用来提交一些数据。也可能是一个组件的属性，代表最大的数量。如果当前的数量小于等于 0，或者大于最大的数量，那么这个按钮就会被禁用。这是一个 Angular 组件的 HTML 模板代码，涉及到了一些 Angular 的核心特性，包括结构型指令。可能是一个组件的属性，代表当前的数量，这个类，否则就会使用。
angular之绑定图片，ngFor、ngIf、ngswitch、ngclass、事件、双向绑定等
aaaPostcard的博客
03-05 1382
当我们使用vsCode想要更换新的组件的时候，找到app下面的这个： 然后输入新的组件的名字，就可以运行新的组件了。 目录 一、绑定图片 二、循环数据如何显示索引值 三、条件判断ngIf 四、条件判断ngSwitch 五、ngClass用法 六、事件 七、双向绑定 一、绑定图片 1、如果想要绑定本地图片，根目录下面找到assets，然后新建一个images的文件...
ngFor
tanglau的专栏
06-29 1087
在 angular2 里，我们介绍了一个新概念叫"structural directives"，用来描述那些根据表达式在 DOM 上或增加、或删除元素的指令。和其他指令不同，"structural directive"要么作用在template tag上、 要么配合template attribute使用、要么前缀"*"作为简写语法糖。因为这个新语法特性，初学者常常犯错。 你能分辨出来以下错
Angular ngIf ngSwitch ngForOf
yanyi24的博客
01-20 1176
ngIf、ngSwitch、ngForOf 这一节，我们将介绍angular内置指令：ngIf、ngSwitch、ngForOf。这也是日常开发中经常会遇到的常见指令。原文阅读 ngIf ngIf是内置的结构型指令，控制宿主元素的添加或删除，取决于绑定的值是否为真。（跟vue的v-if是类似的，不是控制display属性） 单独使用ngIf import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app
Angular中ngfor与ngif的嵌套使用
qq_37609418的博客
03-03 992
ng2 结构指令不能直接嵌套使用，可以通过使用标签来包裹指令，两个结构指令分开放在两个标签中，解决冲突。 <ul *ngFor="let value of item; let key = index"> <li *ngIf="value.isShow">{{value.name}}</li> </ul> ...
angular10中的ngFor结构型指令使用
梧桐芊羽的博客
08-21 2441
结构型指令是什么 结构型指令是塑造或重塑 DOM 的结构，比如添加、移除或维护这些元素。在anugular中最常用的3个内置结构型指令NgIf，NgFor，NgSWitch。而今天我们要介绍的主角是ngFor指令的几个常见使用。若大家想要了解更多的话，请登录官网查看。https://angular.cn/guide/structural-directives#inside-ngfor 在angular中遍历数组时，需要用到ngFor指令来给数组的每一项实例化模板。 第一种使用方式： <ul>
Anglar *ngFor 指令的使用 详细版
qq_44327851的博客
11-17 306
​详细介绍*ngFor如何循环对象； 一般来说，*ngFor使用来循环数组的，循环对象会有报错：Cannot find a differ supporting object 'object' of type 'object'. NgFor only supports binding to Iterables such as Arrays. 这个时候最直接的就是使用keyValue这个管道，本文后面会写到将对象转化成数组从而再循环处理，也会介绍直接使用js编写的自定义指令实现效果。
*ngif 和 显示隐藏的区别
热门推荐
wen_binobject的博客
11-21 1万+
1. 当隐藏子树时，它仍然留在 DOM 中。 子树中的组件及其状态仍然保留着。 即使对于不可见属性，Angular 也会继续检查变更。 子树可能占用相当可观的内存和运算资源。 当NgIf为false时，Angular 从 DOM 中物理地移除了这个元素子树。 它销毁了子树中的组件及其状态，也潜在释放了可观的资源，最终让用户体验到更好的性能。 2. 防范空指针错误 ngIf指令通常会用来防范空指针错...
Angular：ngFor指令
zouk‘s blogs
12-29 5054
参考：官方文档 NgFor 指令 。 ngFor指令 使用方法首先,创建自定义组件user-list（如何创建自定义组件），并为name属性初值。然后,在子组件html中引用自定义组件，并使用*ngFor指令 效果演示
Angular中结构型指令的使用 举例
02-23
Angular中的结构型指令是用来更改DOM的结构的。它们可以用来为DOM元素添加、移除和替换元素，以及控制它们的显示和隐藏。例如，可以使用ngIf指令来控制是否显示某个DOM元素：*ngIf="showElement">...</div>

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值