首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如果数组为空,则不渲染- Angular *ngFor

Angular是一种流行的前端开发框架,它提供了一种简单而强大的方式来构建Web应用程序。*ngFor是Angular中的一个指令,用于在模板中循环渲染数组的元素。

当使用ngFor指令时,如果数组为空,Angular将不会渲染任何内容。这意味着在模板中没有任何与ngFor相关的元素将被显示出来。这是Angular的默认行为,因为没有任何元素可供渲染。

*ngFor指令的语法如下:

代码语言:txt
复制
*ngFor="let item of items"

其中,items是要循环渲染的数组。在模板中,可以使用item来引用数组中的每个元素。

*ngFor指令的优势是它提供了一种简洁而灵活的方式来处理数组的渲染。它可以轻松地循环渲染数组中的元素,并且可以根据需要进行条件渲染。

在实际应用中,*ngFor指令可以用于各种场景,例如渲染动态列表、生成表格、显示搜索结果等。它是Angular开发中常用的指令之一。

腾讯云提供了一系列与Angular相关的产品和服务,例如云服务器、云数据库、云存储等。您可以通过访问腾讯云官方网站(https://cloud.tencent.com/)了解更多关于这些产品的详细信息。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Angular 中结构指令模式 - 它们是什么且怎么使用

如果你对学习 结构指令 感兴趣,那么现在我们就来接着阅读,并了解它们是什么,它们有什么用以及如何在项目中使用它们。 你将学到什么 在本文中,你将学到关于 Angular 结构指令模式的知识点。...*ngIf - 根据表达式返回的布尔值,有条件地包含一个模版(即条件渲染模版) *ngFor - 遍历数组 *ngSwitch - 渲染每个匹配的是图 下面是一个结构化指令的例子。...指令 我们使用 *ngFor 指令来遍历数组。...当条件值是 true 的时候,相关的元素就会被渲染到 DOM 中,其余的元素将被忽略。如果没有元素匹配,则渲染 *ngSwitchDefault 的元素到 DOM 中。...总结 结构指令是 Angular 中很重要的一部分,我们可以通过多种方式使用它们。 希望通过本文,读者能更好理解怎么去使用这些指令和什么时候去使用这些模式。 本文译文,采用意译的形式。

3.8K20

Angular快速学习笔记(3) -- 组件与模板

小结 带有双花括号的插值表达式 (interpolation) 来显示一个组件属性 用 ngFor 显示数组 用一个 TypeScript 类来你的组件描述模型数据并显示模型的属性 用 ngIf...实际上,在渲染视图之前,Angular 把这些插值表达式翻译成相应的属性绑定。...下例中,当 currentHero 时,保护视图渲染器,让它免于失败。 The current hero's name is {{currentHero?....name}} 当绑定中 title 属性,仍然会继续渲染断言操作符(!) 在 TypeScript 2.0 中,你可以使用 --strictNullChecks 标志强制开启严格值检查。...在这种模式下,有类型的变量默认是不允许 null 或 undefined 值的,如果有未赋值的变量,或者试图把 null 或 undefined 赋值给不允许的变量,类型检查器就会抛出一个错误 Angular

15.2K30
  • Angular 从入坑到挖坑 - 组件食用指南

    true 时,这个元素则会显示在页面上,当属性值 false 时,则不显示该元素 ngIf 指令并不是通过使用 css 样式来隐藏元素的,当值 false 时,则这些元素会从 dom 中被销毁,并且所有监听该...,angular 以此为模板,循环渲染出所有的数据 {{i+1}} - {{item.name}} -...安全导航运算符 在视图中使用的属性值 null or undefined 时,javascript 和 angular 会引发指针异常并中断视图的渲染过程, 从而视图会渲染失败,而使用了安全导航运算符...非断言运算符 在 tsconfig.json 中启用 strictNullChecks 属性,typescript 将会强制开启严格的值检查,在这种模式下,所有定义了类型的属性是不允许赋值 null...非断言运算符用来告诉编译器对特定的属性不做严格的值校验,当属性值 null or undefined 时,不抛错误。

    15.8K30

    Angular 2 + 折腾记 :(2)初步认识angular2,不一样的开发模式

    title}} 复制代码 app.component.spec.ts: 测试用例,够繁琐,以后再说 app.components.ts:组件逻辑处理 // 导入装饰器:装饰器可以理解一些函数的封装...true : false ) 直接赋值运算(item = 2); 变量传递 值保护运算符(?.) item?.a?....,用来动态判断增加多个样式 [class.a]或者[style.font-size]:单一操作类或者某个行内样式 数据遍历(*ngFor) *ngFor="let i of item; let index...= index": 可以用这个来遍历数组对象,let index = index意思是创建一个局部遍历把当前遍历的索引保存到你的自定义变量index 动态渲染(*ngIf) *ngIf="item"...: 比如loading到视图全部渲染就经常用到这个,当前不在乎低版本的可以用[hidden]来控制切换,因为*ngIf这种动态渲染节点的还是有一定的性能消耗的。。

    6.2K20

    Angular 2.x折腾记 :(2)初步认识angular2,不一样的开发模式

    > {{title}} app.component.spec.ts: 测试用例,够繁琐,以后再说 app.components.ts:组件逻辑处理 // 导入装饰器:装饰器可以理解一些函数的封装...true : false ) 直接赋值运算(item = 2); 变量传递 值保护运算符(?.) item?.a?....[class.a]或者[style.font-size]:单一操作类或者某个行内样式 数据遍历(*ngFor) *ngFor="let i of item; let index = index": 可以用这个来遍历数组对象...,let index = index意思是创建一个局部遍历把当前遍历的索引保存到你的自定义变量index 动态渲染(*ngIf) *ngIf="item" : 比如loading到视图全部渲染就经常用到这个...,当前不在乎低版本的可以用[hidden]来控制切换,因为*ngIf这种动态渲染节点的还是有一定的性能消耗的。。

    10110

    Angular 显示英雄列表

    定义一个包含十个英雄的常量数组 HEROES,并导出它。 该文件是这样的。 src/app/mock-heroes.ts import { Hero } from '....="let hero of heroes"> *ngFor 是一个 Angular 的复写器(repeater)指令。...Angular 会把所点击的  上的 hero 对象传给它,这个 hero 也就是前面在 *ngFor 表达式中定义的那个。...并且为这个 div 添加 Angular 的 *ngIf 指令,把它的值设置 selectedHero。 不要忘了 ngIf 前面的星号(*),它是该语法中的关键部分。...详情部分仍然是。 点击一个英雄,它的详情就出现了。 这个应用看起来又再次工作正常显示了。 英雄显示在列表中,当你单击英雄的名字的时候,有关你单击英雄的详细信息就显示在页面的底部了。

    4.4K70

    AngularDart 4.0 高级-结构指令 顶

    Angular在实际渲染过程中消耗了内容,并用诊断注释替换了。 NgFor和NgSwitch ...指令遵循相同的模式。...Angular设置let-hero上下文的$implicit属性的值,NgFor已经用当前迭代的hero初始化了它的值。 API指南描述了额外的NgFor指令属性和上下文属性。...NgIf或NgFor应该先走哪一个? NgIf能否取消NgFor的效果? 如果是这样(并且看起来应该如此),Angular应该如何概括取消其他结构指令的能力? 这些问题没有简单的答案。...如果条件假并且视图尚未创建,请告诉视图容器从模板创建嵌入的视图。 如果条件真并且当前显示视图,则清除且销毁视图的容器。 没有人读取myUnless属性,因此它不需要getter。...Angular将星号(*)语法解析。 NgIf,NgFor和NgSwitch内置指令如何工作。 关于扩展成的微语法。

    16.1K20

    angular知识点梳理第二篇-基本语法

    文章目录 前文回顾 基本语法 常见指令 NgModel NgFor NgIf Ng-container 管道 前文回顾 前面已经写了关于angular项目的基本介绍和如何创建一个angular项目,这一篇主要梳理一些...-- 使用{{}}进行数据的获取 --> {{inputData}} 运行效果 NgFor NgFor和我们js中的for循环渲染数据是一致的,所以这里是比较容易理解的,简单的演示一下...这里有必要介绍一下,这个类比的话就喝vue的template是基本一致的,不是完全一致,我们可以将它看作一个承载体,也就是说我们无法进行包裹判断的一些元素或者段落可以使用这个进行包裹,因为他是一个不被渲染的...运行效果 如果这个tag标签不太理解的,你可以将它完全当作一个容器,当你需要对一段内容控制逻辑的时候但是不知道使用什么元素标签的时候就可以使用这个,在html的任何场景下都可以使用!...官方的话:没有 DOM 元素的指令安排宿主 管道 管道其实就是具有一定功能的函数,主要是一些场景是对字符串什么的进行简单的转化,当然我们也可以自己使用自定义的函数进行数据的转换,只是angular给我们提供了一些初始化的功能函数管道详细列表

    2.5K30

    Angular 显示英雄列表

    定义一个包含十个英雄的常量数组 HEROES,并导出它。 该文件是这样的。 src/app/mock-heroes.ts import { Hero } from '....="let hero of heroes"> *ngFor 是一个 Angular 的复写器(repeater)指令。...Angular 会把所点击的  上的 hero 对象传给它,这个 hero 也就是前面在 *ngFor 表达式中定义的那个。...并且为这个 div 添加 Angular 的 *ngIf 指令,把它的值设置 selectedHero。 不要忘了 ngIf 前面的星号(*),它是该语法中的关键部分。...详情部分仍然是。 点击一个英雄,它的详情就出现了。 这个应用看起来又再次工作正常显示了。 英雄显示在列表中,当你单击英雄的名字的时候,有关你单击英雄的详细信息就显示在页面的底部了。

    4K30

    【玩转腾讯云】手把手教你使用VueReactAngular三大框架开发Pagination分页组件

    主要包含以下功能: 点击左右分页按钮可以跳转到上一页/下一页; 点击中间的页码按钮可能跳转到相应的页码; 首页尾页需要始终显示出来(如果只有1页则不显示尾页); 除首尾页之外,当前页码左右最多只显示2页...和Vue/React的差别比较大: 一是外部传参方式不同,Angular使用@Input这个装饰器表示外部参数; 二是Angular使用ngFor指令渲染列表数据; 三是Angular优化DOM对比的方式是使用...现简述如下: 首页尾页需要始终显示出来(如果只有1页则不显示尾页); 除首尾页之外,当前页码左右最多只显示2页(共5页); 其他页码折叠起来,用更多按钮代替。 接下来看看如何用三大框架实现这个逻辑。...: 如果总页码小于等于7,则centerPages是除首尾页之外的所有页码; 如果总页码大于7,则centerPages是以current中心,左右各加两页组成的页码数组。...7,则centerPages是以current中心,左右各加两页组成的页码数组

    7.8K00

    AngularDart4.0 指南- 模板语法二 顶

    如果名称未能匹配已知指令的元素事件或输出属性,则Angular会报告“未知指令”错误。 $event和事件处理语句 在事件绑定中,Angular目标事件设置了一个事件处理程序。...对象的每个键都是一个CSS类的名字; 如果应该添加类,则其值true,如果应该删除则为false。...和null属性路径 Angular安全导航运算符(?.)与Dart条件成员访问运算符一样,是防止属性路径中的值的便利方法。 在这里,如果currentHero,则防止视图呈现失败。...如果hero属性不能为,这将是合理的行为。 如果它永远不能为,但它是的,这是一个应该被捕获和修复的编程错误。 抛出异常是正确的。...想象一下,在诸如a.b.c.d这样的长属性路径中的某个地方防止值。 Angular安全导航操作符(?.)是一种更为流畅和方便的方法来防止在属性路径中出现。表达式在达到第一个值时会被释放。

    29.9K20

    AngularDart4.0 指南- 显示数据 顶

    用* ngFor显示一个列表属性 要显示英雄列表,首先向组件添加英雄名字列表,并将myHero重新定义列表中的第一个名字。...Angular列表中的每个项目复制,将hero变量设置当前迭代中的项目(英雄)。 Angular使用该变量作为双曲花括号内插的上下文。...如果有三个以上的英雄,让我们更改示例以显示一条消息。 Angular ngIf指令根据布尔条件插入或删除一个元素。...当组件的英雄列表中有三个以上的项目时,Angular会将该段落添加到DOM,并显示消息。 如果有三个或更少的项目,Angular会忽略该段落,所以不会显示任何消息。...ngFor显示项目列表。 Dart类,用于您的组件生成模型数据并显示该模型的属性。 ngIf有条件地显示基于布尔表达式的HTML块。

    5.3K10

    Angular 2 数据显示

    本章节我们将为大家介绍如何将数据显示到用户界面上,可以使用以下三种方式: 通过插值表达式显示组件的属性 通过 NgFor 显示数组型属性 通过 NgIf 实现按条件显示 ---- 通过插值表达式显示组件的属性...要显示组件的属性,插值是最简单的方式,格式:{{属性名}}。...以下代码基于 Angular 2 TypeScript 环境配置 来创建,你可以在该章节上下载源码,并修改以下提到的几个文件。...会自动从组件中提取 title 和 mySite 属性的值,并显示在浏览器中,显示信息如下: 使用 ngFor 显示数组属性 我们也可以循环输出多个站点,修改以下文件: app/app.component.ts...{{title}} 我喜欢的网站: {{mySite}} 网站列表: <li *ngFor="let site

    2.4K20

    过渡到 Angular 17 的新控制流语法

    最近将我们当前项目的一些模板迁移到Angular 17的新控制流语法后,我觉得分享一些见解能够帮助一些人顺利过渡到这种新语法,每个控制流结构提供清晰和明确的示例。所以,让我们开始吧。...} *ngFor指令 vs @for控制块Before(传统 *ngFor): {{ item }}</ul...使用自动迁移:使用 Angular v17 CLI 的迁移命令。ng g @angular/core:control-flow或者更好的方式是分步进行。...向后兼容性和性能Angular 17允许您在应用程序中同时使用新旧语法。就性能而言,值得一提的是,Angular团队观察到使用新语法时达到了高达90%的速度性能改进。...结论Angular 17引入的新控制流语法在处理Angular应用程序中的模板和渲染逻辑方面带来了显著的改进。转换到这种新语法,承诺会使我们的代码更易读、易维护和高性能。

    63220

    使用Ionic2开发Todo应用0 开始之前1 创建新的Ionic 2工程2. 设置主页(Home page)3 持久化数据保存4 总结

    如果没有,先去安装和学习吧。 1 创建新的Ionic 2工程 我们将通过生成一个基于“空白”模板的新项目开始。这是一个的项目框架,但有一些示例代码供我们使用。...所以,如果我们的items数组(稍后将定义在类定义)有4项,那么将渲染四次。还要注意,我们使用的** let item ,循环分配一个items数组项给item**。...现在我们已经建立了一些假的数据(我们使用ionViewDidLoad生命周期钩子,这将在页面加载时被触发),您应该能够看到它已经在列表中渲染了: ?...现在,我们仅通过将数据push到items数组,最终,我们将保存到数据库。 我们已经移除了假数据,因为现在用户输入通过saveItem方法被添加到了this.items。我们将items初始。...数组中save函数简单地将所有的项放入数组并保存到存储,每当项目变化我们将调用这个函数。

    6.1K50

    AngularDart4.0 英雄之旅-教程-04明细 顶

    如果您的结构不匹配,请返回该页面以弄清楚您错过了什么。 ? 如果该应用尚未运行,请启动该应用。 当您进行更改时,请通过重新加载浏览器窗口来保持运行。...ngFor指令遍历组件的英雄列表并为该列表中的每个英雄呈现该模板的一个实例。 表达式部分将hero标识模板输入变量,其中包含每个迭代的英雄详情。...例如,当用户点击“Magneta”时,它应该用一个独特但微妙的背景颜色渲染,如下所示: ?...在模板中,将以下绑定添加到标记中: [class.selected]="hero === selectedHero" 当表达式(hero === selectedHero)true时,Angular...当表达式false时,Angular删除选定的类。 ===运算符测试给定的对象是否相同。 在模板语法指南中阅读有关[class]绑定的更多信息。

    3K30
    领券