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

ngFor angular 2+内部的ngSwitch

ngFor是Angular框架中的一个指令,用于在模板中循环渲染一组元素。它可以遍历一个集合,并为集合中的每个元素生成相应的HTML代码。

ngFor指令可以与ngSwitch指令结合使用,以根据条件在循环中切换不同的模板。ngSwitch是Angular框架中的另一个指令,用于根据表达式的值选择要显示的模板。

ngFor指令的使用方式如下:

代码语言:html
复制
<container-element *ngFor="let item of items; let i = index">
  <!-- 循环中的模板 -->
  {{ item }}
</container-element>

在上面的代码中,container-element是要循环渲染的元素的父元素,items是要遍历的集合,item是集合中的每个元素,i是当前元素的索引。

ngSwitch指令的使用方式如下:

代码语言:html
复制
<container-element [ngSwitch]="expression">
  <template-element *ngSwitchCase="value1">模板1</template-element>
  <template-element *ngSwitchCase="value2">模板2</template-element>
  <template-element *ngSwitchDefault>默认模板</template-element>
</container-element>

在上面的代码中,container-element是要根据条件切换模板的元素,expression是一个表达式,value1value2是要匹配的值,template-element是不同条件下要显示的模板,ngSwitchDefault是默认的模板。

ngFor和ngSwitch的组合使用可以实现根据条件循环渲染不同的模板,这在处理动态数据和条件渲染时非常有用。

腾讯云相关产品和产品介绍链接地址:

以上是腾讯云提供的一些与云计算相关的产品,可以根据具体需求选择合适的产品来支持云计算领域的开发和运维工作。

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

相关·内容

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

幸运是,Angular NgModel指令是一个使元素形成双向绑定桥梁。 内置指令 早期版本Angular包含了七十多个内置指令。 社区贡献了更多,并且为内部应用程序创建了无数私人指令。...NgFor:为列表中每个项目重复一个模板。 NgSwitch:只显示多个可能元素中一个。 NgIf  您可以通过向该元素应用NgIf指令(称为宿主元素)来添加或移除DOM中元素。...分配给* ngFor文本是指导迭代器进程指令。 *ngFor微语法 分配给* ngFor字符串不是模板表达式。 这是一种微语法 - Angular解释一种小语言。...绑定到[ngSwitch]。 如果您尝试设置*ngSwitch,则会出现错误,因为NgSwitch是一个属性指令,而不是结构指令。 它改变了其同伴指令行为。 它不直接操作DOM。...别名输入/输出属性 有时输入/输出属性公共名称应与内部名称不同。 属性指令通常是这种情况。指令消费者希望绑定到指令名称。

29.9K20

Angular教程】-组件初识|8月更文挑战

前提: 准备一个空angular项目(ng new angular-course) 与Angular组件第一次会面 **通过创建组件命令: ****ng g c components/HelloWorld...组件相关其他文件暂时先放一放,在Vue开发时候我们创建好组件总是要挂载后才能使用,那angular需要挂载吗?...应为angular项目创建时候默认初始化了git仓库,我们这会儿可以看到还有一个文件是有变化,那就是app.module.ts,打开文件后我看就看到了新创建组件已经自动挂载到了全局app上。..."不显示" : "显示" }} Hello World NgFor(内置): 给组件ts添加属性: public list: Array...}} {{ item }} NgSwitch(内置): 给组件ts添加属性: public status: number = 1; 给组件html模板添加演示代码: <div [ngSwitch

1.9K20

Angular2 之 结构型指令几个概念

Angular 有一个强力模板引擎,它能让你轻松维护元素DOM树结构。 Angular指令可分为三种 组件 属性型指令 结构型指令 组件 组件其实就是一个带模板指令。...结构型指令 结构型指令通过添加和删除 DOM 元素来改变DOM布局。 我们经常看到内置结构型指令有:ngIf、ngSwitchngFor。 下面我们着重介绍ngIf。...弊 如果我们很快再次使用这个组件时候,重建组件代价是非常大。 当ngIf重新变成true时候,angular会重新创建该组件及其子树。angular会重新运行每个组件初始化逻辑。...要么显示包含在Template标签中,要么隐式使用*这种语法糖去包装在Template标签中。它简化了ngIf和ngFor —— 无论是写还是读。...ngFor Angular把*ngFor转换成一个类似的形式: <!

3K20

ng-content 中隐藏内容

由于许多问题与Angular组件生命周期相关,因此我们主要组件将显示一个计数器,用于展示它已被实例化次数: import { Component } from '@angular/core';...请注意,目标 ng-content 会优先于 catch-all,即使它在模板中位置靠后。 ngProjectAs 有时你内部组件会被隐藏在另一个更大组件中。...有时你只需要将其包装在额外容器中即可应用 ngIf 或 ngSwitch。无论什么原因,通常情况下,你内部组件不是包装器直接子节点。...难道这是 ngIf 指令产生问题,让我们测试一下 ngFor 指令,看看是否有同样问题: import { Component } from '@angular/core'; @Component...其中唯一方法就是查看第三方库代码,了解它们内部处理逻辑。将组件生命周期被绑定到我们应用程序组件而不是包装器意义是,开发者可以掌控计数器只被实例化一次,而不用了解第三方库内部代码。

2.7K30

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

angular脏检测机制是基于一定条件和时间,在给this.vm.dessertSlides赋值,dom还没更新完成就调用initSwiper方法不一定会获得想要结果,所以在此之前调用手动检测方法...问题二:为什么用[hidden],不用*ngIf或者ngSwitch? 因为前者只是隐藏,而后两者是会移除。...也就是说,前者只会初始化一次,而后两者每次显示都需要重新初始化,进一步说,若使用后两者方式,对于这里用到swiper,它不是一个angular封装起来组件,不会自动初始化,我们每次显示它时都需要显式调用一下...ts中把initSwiper方法相关内容移除: import { Component, ViewChild, ElementRef, ChangeDetectorRef } from '@angular... 这样当新数据有值且长度大于0时,才会显示ion-slides组件,进而内部进行初始化

1.4K20

angular入门教程_初学者织围巾简单教程慢动作

“组件化”意义有2个:第一是分治,因为有了组件之后,我们可以把各种逻辑封装在组件内部,避免混在一起;第二是复用,封装成组件之后不仅可以在项目内部复用,而且可以沉淀下来跨项目复用。...模板内局部变量 属性绑定、事件绑定、双向绑定 在模板里面使用结构型指令 *ngIf、*ngForngSwitch 在模板里面使用属性型指令 NgClass、NgStyle、NgModel 在模板里面使用管道格式化数据...有一个非常重要原因,比如你编写了以下 Angular 模板: { {race.name}} 有一些朋友会追问,如果我在模板里面定义局部变量和组件内部属性重名会怎么样呢?...在模板里面使用结构型指令 Angular 有3个内置结构型指令:*ngIf、*ngForngSwitchngSwitch 语法比较啰嗦,使用频率小一些。

3.3K20

浅谈Angular

1.准备工作: ①全局安装 Angular CLI。...Angular数据绑定: 1.插值表达式 {{}}--括号里可填表达式,不能填语句!...ng-show本质上设置元素display值为none,只是设置样式,DOM结构还在,而*ngIf是真正意义上从DOM结构中移除 *ngFor--动态创建DOM结构 ngSwitch--通过匹配case...可以给@Input装饰器内部填写一个元数据,这个值是外部使用名字 内部还是使用原来名字 3.如果想要给指令添加元素绑定事件,需要使用@HostListener装饰器 如果要通过指令控制DOM显隐...,需要在指令内部获取到宿主元素和承载宿主元素容器,通过依赖注入templateRef和ViewContainerRef服务 4.管道:pipe 作用:对数据进行处理(删除,插入,过滤,拼接等)

4.4K10

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

,再次显示时不用重新进行初始化过程 NgFor:通过定义单条数据显示格式,angular 以此为模板,循环渲染出所有的数据 <p *ngFor="let item of products; let...,此时当渲染数据发生改变时,只会重新渲染变更了指定属性值数据 不使用 trackBy 跟踪属性 <p *ngFor="let item of products; let...NgSwitch:根据条件切换,从候选几个元素中选择匹配,放到 dom 元素中 请选择配置 <option value...NgSwitch 本身是一个属性型指令,它不会直接操作 dom 元素,而是通过它所控制两个结构型指令(NgSwitchCase、ngSwitchDefault)来操作 dom 元素 4.3、管道 在使用模板表达式绑定数据时...name}} 非空断言运算符不会防止出现 null 或 undefined,只是不提示 4.3.2、常用管道函数 纯管道 只有在它检测到输入值发生了纯变更时才会执行,但是会忽略对象内部变更

15.8K30

Angular学习笔记(一)

架构 模块 Angular 应用是模块化,并且 Angular 有自己模块系统,它被称为 Angular 模块 或 NgModules。...数据绑定 Angular 支持数据绑定,一种让模板各部分与组件各部分相互合作机制。 往模板 HTML 中添加绑定标记,来告诉 Angular 如何把二者联系起来。...指令 Angular 模板是动态。当 Angular 渲染它们时,它会根据指令提供操作对 DOM 进行转换。 服务 服务是一个广义范畴,包括:值、函数,或应用所需特性。...- 添加或移除一组CSS类 NgStyle - 添加或移除一组CSS样式 NgModel - 双向绑定到HTML表单元素 内置结构型指令 NgIf - 根据条件把一个元素添加到DOM中或从DOM移除 NgSwitch...- 一组指令,用于切换一组视图 NgFor - 对列表中每个条目重复套用同一个模板 模板引用变量 # var 3.

3.2K20
领券