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

Angular:根据ngFor内部的选择显示div

Angular是一种流行的前端开发框架,它使用TypeScript编写,并由Google维护和支持。Angular通过使用组件化的方式来构建用户界面,其中ngFor是Angular中的一个内置指令,用于循环遍历一个集合并生成相应的HTML元素。

根据ngFor内部的选择显示div的过程如下:

  1. 首先,我们需要在组件中定义一个集合,例如一个数组,用于存储要循环遍历的数据。
  2. 在HTML模板中,使用ngFor指令来循环遍历这个集合,并为每个元素生成相应的HTML元素。ngFor指令的语法如下:
  3. 在HTML模板中,使用ngFor指令来循环遍历这个集合,并为每个元素生成相应的HTML元素。ngFor指令的语法如下:
  4. 这里的items是我们在组件中定义的集合,item是循环遍历过程中的每个元素。
  5. 在ngFor指令中,我们可以使用条件语句来控制是否显示div。例如,我们可以使用ngIf指令来判断某个条件是否满足,如果满足则显示div,否则不显示。示例代码如下:
  6. 在ngFor指令中,我们可以使用条件语句来控制是否显示div。例如,我们可以使用ngIf指令来判断某个条件是否满足,如果满足则显示div,否则不显示。示例代码如下:
  7. 这里的item.selected是一个布尔值,表示当前元素是否被选择。如果item.selected为true,则显示div,否则不显示。

通过以上步骤,我们可以根据ngFor内部的选择来显示或隐藏div元素,从而实现根据条件动态显示内容的效果。

在腾讯云的产品中,推荐使用腾讯云的云开发(Tencent Cloud Base)服务来支持Angular应用的部署和托管。云开发提供了云函数、数据库、存储等一系列后端服务,可以方便地与Angular前端应用进行集成。您可以通过以下链接了解更多关于腾讯云开发的信息: 腾讯云开发产品介绍

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

相关·内容

AngularDart 4.0 高级-结构指令 顶

内部Angular分两个阶段。 首先,它将*ngIf =“...”转换为模板属性template =“ngIf ...”,就像这样。 <div template="ngIf hero !...*ngFor内部详解 Angular以类似的方式将*ngFor转换为从星号(*)语法通过模板属性到模板元素。...NgFor指令具有比本指南中显示NgIf更多功能,包括必需和可选。 至少NgFor需要一个循环变量(let hero)和一个列表(heroes)。...Angular设置let-hero为上下文$implicit属性值,NgFor已经用当前迭代hero初始化了它值。 API指南描述了额外NgFor指令属性和上下文属性。...括号定义了一个CSS属性选择器。 指令属性名称应使用lowerCamelCase拼写,并以前缀开头。 不要使用ng。 该前缀属于Angular选择适合您或您公司简短内容。

16K20

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

幸运是,Angular NgModel指令是一个使元素形成双向绑定桥梁。 内置指令 早期版本Angular包含了七十多个内置指令。 社区贡献了更多,并且为内部应用程序创建了无数私人指令。...警惕隐藏大型组件树; NgIf可能是更安全选择。 警惕null ngIf指令通常用于防止null。 显示/隐藏是无用。 如果嵌套表达式试图访问null属性,Angular会抛出一个错误。...它别无选择,只能拆除旧DOM元素并插入所有新DOM元素。 Angular可以通过trackBy避免这种流失。 向组件添加一个返回NgFor应跟踪值方法。 在这个例子中,这个值就是英雄ID。...它可以根据切换条件从几个可能元素中显示一个元素。 Angular只把选中元素放入DOM中。...例如,您可以将数字显示为货币,强制文本为大写,或筛选列表并对其进行排序。 对于这些小型转换来说,Angular 管道是一个很好选择。 管道是简单函数,它接受一个输入值并返回一个转换后值。

29.9K20

Angular 显示英雄列表

在本页面,你将扩展《英雄指南》应用,让它显示一个英雄列表, 并允许用户选择一个英雄,查看该英雄详细信息。 创建模拟(mock)英雄数据 你需要一些英雄数据以供显示。...Angular 会把所点击  上 hero 对象传给它,这个 hero 也就是前面在 *ngFor 表达式中定义那个。...把显示英雄详情 HTML 包裹在一个  中。 并且为这个 div 添加 Angular  *ngIf 指令,把它值设置为 selectedHero。...Angular  CSS 类绑定机制让根据条件添加或移除一个 CSS 类变得很容易。...用户可以选择一个英雄,并查看该英雄详情。 你使用 *ngFor 显示了一个列表。 你使用 *ngIf 来根据条件包含或排除了一段 HTML。 你可以用 class 绑定来切换 CSS 样式类。

4.4K70

【Appetite】ionic3实录(七)次页实现及分析解决问题【下】

angular脏检测机制是基于一定条件和时间,在给this.vm.dessertSlides赋值,dom还没更新完成就调用initSwiper方法不一定会获得想要结果,所以在此之前调用手动检测方法...也就是说,前者只会初始化一次,而后两者每次显示都需要重新初始化,进一步说,若使用后两者方式,对于这里用到swiper,它不是一个angular封装起来组件,不会自动初始化,我们每次显示它时都需要显式调用一下...这并不是说都不要用*ngIf,因为当页面元素太多时会容易导致界面卡顿,所以没用多余元素应该移除,此时就用它。一句话说就是根据情况合理选择显示控制方法。...= 'four'"> 四 执行看下效果: ? 数据未正确应用 对比上一节实际效果图,会发现这里只显示了两个图片,什么原因呢?...ion-slides组件,进而内部进行初始化,此时运行看效果如下,只是此时有个比较突兀2图向3图切换效果,有兴趣可以试试: ?

1.4K20

ng-content 中隐藏内容

由于许多问题与Angular组件生命周期相关,因此我们主要组件将显示一个计数器,用于展示它已被实例化次数: import { Component } from '@angular/core';...该属性支持 CSS 选择器(my-element,.my-class,[my-attribute],…)来匹配你想要内容。...难道这是 ngIf 指令产生问题,让我们测试一下 ngFor 指令,看看是否有同样问题: import { Component } from '@angular/core'; @Component...其中唯一方法就是查看第三方库代码,了解它们内部处理逻辑。将组件生命周期被绑定到我们应用程序组件而不是包装器意义是,开发者可以掌控计数器只被实例化一次,而不用了解第三方库内部代码。...让我们再验证一下 *ngFor 指令: @Component({ selector: 'wrapper', template: ` <div class="box" *ngFor="let

2.7K30

Angular 显示英雄列表

在本页面,你将扩展《英雄指南》应用,让它显示一个英雄列表, 并允许用户选择一个英雄,查看该英雄详细信息。 创建模拟(mock)英雄数据 你需要一些英雄数据以供显示。...Angular 会把所点击  上 hero 对象传给它,这个 hero 也就是前面在 *ngFor 表达式中定义那个。...把显示英雄详情 HTML 包裹在一个  中。 并且为这个 div 添加 Angular  *ngIf 指令,把它值设置为 selectedHero。...Angular  CSS 类绑定机制让根据条件添加或移除一个 CSS 类变得很容易。...用户可以选择一个英雄,并查看该英雄详情。 你使用 *ngFor 显示了一个列表。 你使用 *ngIf 来根据条件包含或排除了一段 HTML。 你可以用 class 绑定来切换 CSS 样式类。

4K30

AngularDart4.0 指南- 表单 顶

你会看到一个样式化表单! 使用* ngFor添加powers 英雄必须从一个固定机构批准权力列表中选择一个超级大国。 您在内部维护该列表(在HeroFormComponent中)。...您将在表单中添加一个select,并使用ngFor(先前在“显示数据”页面中看到一种技术)将选项绑定到powers列表。...在内部Angular创建NgFormControl实例,并使用Angular附加到标签NgForm指令注册它们。...显示错误消息。 您可以通过根据名称控制状态设置隐藏属性来控制错误消息可见性。...在这个例子中,当控件是有效或者原始时候隐藏消息 - “pristine”意味着用户没有改变这个值,因为它是以这种形式显示。 用户体验是开发者选择 有些开发人员希望消息始终显示

17.4K30

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

在此页面中,您将扩展“Tour of Heroes”应用程序,以显示英雄列表,并允许用户选择英雄并显示英雄详细信息。 完成此页面后,该应用应该看起来像这个实例(查看源代码)。...在显示数据Showing a list property with *ngFor部分阅读更多关于ngFor和模板输入变量和模板语法页ngFor部分 在节点内添加内容hero模板变量来显示英雄属性...添加一个点击处理程序来显示选定英雄  你不再需要hero属性,因为你不再显示一个英雄; 你正在显示一个英雄列表。 但是用户可以通过点击选择一个英雄。...在结构指令页面和模板语法页面的内置指令部分阅读有关ngIf和ngFor更多信息。 格式化选中hero 当选择英雄细节显示在列表下方时,很难在列表中识别选定英雄。...您将Hero类移到lib / src下自己文件中。 你增加了选择英雄和显示英雄细节能力。 您了解了如何在组件模板中使用核心指令ngIf和ngFor

3K30

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

文章目录 前文回顾 基本语法 常见指令 NgModel NgFor NgIf Ng-container 管道 前文回顾 前面已经写了关于angular项目的基本介绍和如何创建一个angular项目,这一篇主要梳理一些...-- 使用{{}}进行数据获取 --> {{inputData}} 运行效果 NgFor NgFor和我们js中for循环渲染数据是一致,所以这里是比较容易理解,简单演示一下...-- 默认是没有key,这里需要key地方需要给index重新赋值, --> {{item.title}}...{{item.id}} 运行效果 NgIf NgIf指令是可以控制页面元素显示与消失,这里和隐藏要区别开,他效果和css中display:none效果是一致,和visibility...:{{isShow}} 我是一个div块 运行效果 true显示: false不显示: Ng-container ng-container

2.5K30
领券