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

最新推荐文章于 2024-02-21 01:30:00 发布
最新推荐文章于 2024-02-21 01:30:00 发布
阅读量438 收藏
点赞数
文章标签： 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中的结构指令ngIf和ngFor。ngIf用于基于条件展示或隐藏DOM元素，而ngFor则用于根据数据数组创建重复元素。ngIf语法示例展示了如何根据布尔表达式控制元素显示，ngFor示例则演示了遍历数组生成列表项。通过这两个指令，开发者可以更灵活地管理DOM并提升应用交互性。
摘要由CSDN通过智能技术生成

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

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

使用ngIf指令的语法如下：

<element *ngIf="condition">...</element
了解本专栏 订阅专栏 解锁全文
YabClass
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
订阅专栏
ngfor ngif（ngif then else） ngswitch + ngfor里面使用ngif 和 ngswitch
weixin_41147129的博客
10-28 1168
<div *ngIf="col.field=='useSubsidy'; then thenBlock else elseBlock " ></div> <ng-template #thenBlock> {{carData.useSubsidy|USE_SUBSIDY_PIP}} </ng-template> <ng-template...
Angular2内置指令NgFor和NgIf详解
09-01
本篇文章将详细介绍Angular2中的两个重要内置指令：NgFor和NgIf。 1. NgFor指令： NgFor指令在Angular2中用于遍历数组或其他可迭代对象，并在视图中生成相应的元素。它的语法是`*ngFor="let item of items"`. 其中...
技术宅小伙：Angular入门 - ngIf和ngFor介绍
2301_76992670的博客
04-05 1028
以上就是管道的一个最基本的用法。这个例子中，我们只是展示了一个非常简单的使用方法，实际上，管道的功能非常强大，我们可以通过自定义管道来实现更加复杂的转换功能。这个例子中，我们只是展示了一个非常简单的使用方法，实际上，管道的功能非常强大，我们可以通过自定义管道来实现更加复杂的转换功能。里面加一个变量来获取当前item的索引，然后我们在这里判断就是如果这个索引是偶数的话，我们就去展示这个item。里面加一个变量来获取当前item的索引，然后我们在这里判断就是如果这个索引是偶数的话，我们就去展示这个item。
Angular中ngfor与ngif的嵌套使用
qq_37609418的博客
03-03 1031
ng2 结构指令不能直接嵌套使用，可以通过使用标签来包裹指令，两个结构指令分开放在两个标签中，解决冲突。 <ul *ngFor="let value of item; let key = index"> <li *ngIf="value.isShow">{{value.name}}</li> </ul> ...
ngFor ngIf
Litwak
04-08 998
angular2中，ngFor和ngIf 一起使用&lt;ng-container *ngIf="show"&gt; &lt;div *ngFor="let thing of stuff"&gt; {{log(thing)}} &lt;span&gt;{{thing.name}}&lt;/span&gt; &lt;/div&gt; &lt;/ng-conta
AngularJS ng-if使用
我的博客
03-15 568
ng-if指令不同于ng-hide，ng-hide隐藏元素，而ng-if是从DOM中移除元素。如果if语句执行结果为true，会添加元素，并显示。ng-if指令用于在表达式为false时。
详解Angular 自定义结构指令
08-30
`<ng-template>`可以包含任何HTML和Angular指令，它提供了一个容器来存储视图逻辑，直到被其他指令如`ngIf`或`ngFor`触发渲染。在示例代码中，我们创建了一个名为`tpl`的模板引用变量，并在`AfterViewInit`生命周期...
Angular 2.x学习教程之结构指令详解
08-30
结构指令通过添加和删除 DOM 元素来更改 DOM 布局。Angular 中两个常见的结构指令是 *ngIf 和 *ngFor，下面这篇文章主要给大家介绍了关于Angular 2.x结构指令的相关资料，需要的朋友可以参考下。
ngFor
tanglau的专栏
06-29 1113
在 angular2 里，我们介绍了一个新概念叫"structural directives"，用来描述那些根据表达式在 DOM 上或增加、或删除元素的指令。和其他指令不同，"structural directive"要么作用在template tag上、 要么配合template attribute使用、要么前缀"*"作为简写语法糖。因为这个新语法特性，初学者常常犯错。 你能分辨出来以下错
*ngFor 和 * ngIf
fdsjiaoDoctor的博客
11-09 2045
*ngFor 中不能使用 *ngIf 语句，请道友们自行修炼，有别的结论的欢迎留言
angular5:*ngIf与*ngFor的使用指南与技巧
热门推荐
前端小白
06-26 1万+
这段时间对于ngIf与ngfor的使用变得多样化,也解决了一些原本写代码的痛点.得以喘息机会,细细总结一下. ngIf与ngFor在angular里被称为是结构型指令.所谓结构型指令,就是它能够塑造或重塑DOM的结构. 说句话就是在渲染的时候它能够帮你增加,删除,维护这些元素. *ngIf 学过vue的话,就知道ngIf与v-if是一样的.就是将元素从DOM树移除,或者是不加载. <di...
*ngFor 和 *ngIf 不能放置在同一个标签上
chelen_jak的专栏
09-29 6188
摘自：https://www.jianshu.com/p/ff3237a3e7dd 用 ngIf 指令来晒男性英雄 &lt;ion-list&gt; &lt;ng-container *ngFor="let item of data"&gt; &lt;ion-item *ngIf="item.gender===1"&gt; &lt;ion-avatar ...
Angular：ngFor指令
zouk‘s blogs
12-29 5089
参考：官方文档 NgFor 指令 。 ngFor指令 使用方法首先,创建自定义组件user-list（如何创建自定义组件），并为name属性初值。然后,在子组件html中引用自定义组件，并使用*ngFor指令 效果演示
Angular 中的 ngFor 指令
最新发布
rubys007的博客
02-21 544
您还可以为以下导出值设置局部变量：index、first、last、even 和 odd。index 将返回当前循环索引，而其他值将提供一个布尔值，指示该值是 true 还是 false。
ng-if
光英的记忆博客
04-10 649
使用ng-if指令可以完全根据表达式的值在DOM中生成或移除一个元素。如果赋值给ng-if的表达式的值是false,那对应的元素将会从DOM中移除,否则对应元素的一个克隆将被重新插 15入DOM中。 161718 查看第12章获得更详细信息。 ng-if同no-show和ng-hide指令最本质的区别是,它不是通过CSS显示或隐藏DOM节点,而是真正生成或移
angular重要指令ngfor
lee727n的博客
07-21 953
通过一个顶部导航栏看下一ngfor的使用。上代码 <ul> <li *ngFor="let menu of menus; let i = index let one = first let final = last"> <a href="#" [class.active]="i === selectedIndex" [class.first]='one' [class.final]='final' (click)="selectedIndex = i
ng-if指令
天马3798
12-14 9867
一、定义和用法 ng-if指令用于在表达式为false时移除html元素。 如果if语句执行结果为true，会添加移除元素，并显示。 ng-if指令不同于ng-hide，ng-hide隐藏元素，而ng-if是从DOM中移除元素。 语法： 参数值 值 描述 expression 如果表达式返回 false 则会移除整个元素，如果为 tru
[Angular] 笔记 3：ngIf
学习笔记
12-20 726
表达式求值为 truthy 时，Angular会渲染在then子句中提供的模板；当为falsy 时，Angular会渲染在可选的。，属性绑定是单向数据流，将数据放到web页面上。是 Angular 的行为指令。元素使用了属性绑定和事件绑定。，事件向上传递，数据向下流动。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值