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

角度2在偶数/奇数项上显示/隐藏ngFor中的换行标记

角度2是指Angular框架的第二个版本,它是一个用于构建Web应用程序的开发平台。在Angular中,ngFor是一个内置的指令,用于循环遍历集合并生成相应的HTML元素。

对于在ngFor中的偶数/奇数项上显示/隐藏换行标记,可以通过使用ngClass指令和CSS来实现。具体步骤如下:

  1. 在组件的HTML模板中,使用ngFor指令来循环遍历集合,并使用ngClass指令来动态添加CSS类。示例代码如下:
代码语言:txt
复制
<div *ngFor="let item of items; let even = even; let odd = odd" [ngClass]="{'hide-line': even}">
  {{ item }}
</div>
  1. 在组件的CSS文件中,定义相应的CSS类。示例代码如下:
代码语言:txt
复制
.hide-line {
  white-space: nowrap;
}

在上述代码中,使用了ngFor指令的特殊变量even和odd来判断当前项是偶数还是奇数。通过ngClass指令,当当前项为偶数时,添加了名为"hide-line"的CSS类,该类设置了white-space属性为nowrap,从而隐藏了换行标记。

关于ngFor的更多信息,你可以参考腾讯云的Angular开发文档:Angular开发文档

请注意,以上答案仅供参考,具体实现方式可能因项目需求和具体情况而有所不同。

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

相关·内容

科学瞎想系列之一四一 电机绕组(17)

也就是说,整数槽绕组的磁势,在空间分布上是一个以2τ为波长(周期),极对数(频率)为p的奇谐函数,将这样一个周期函数作傅立叶分解,得到的最小频率为p,如果将其定义为基波,即基波磁势的波长为2τ,其他各项为谐波...(d/2)•τ内的安导波分布与后半个周期(d/2)•τ内的安导波分布即不满足奇谐函数的条件,也不满足偶谐函数的条件,也就是说,当d为偶数时,安导波即不是奇谐函数也不是偶谐函数,相应产生的磁势同样即不是奇谐函数也不是偶谐函数...小结:各种文献中虽然分析方法和计算公式不同,某些描述甚至存在一些小错误,但经过必要的修正后,基本上均是正确和一致的。...其中许实章与黄国治两位教授所著文献中的公式基本相同,且与李发海等教授的文献描述本质上是相同的;而其余三个文献本质上也是相同的。...N= b•d+c;角度αυ分两种情况: ① 当 d =偶数时: αυ=D•d•αm•υ+180º ⑼ ② 当 d =奇数时,又分两种情况: P为偶数时: αυ=D•d•αm•υ ⑽ P为奇数时

2.6K31

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

修改后的size值流向样式绑定,使显示的文本变大或变小。 双向绑定语法实际上只是属性(property)绑定和事件绑定的语法糖。...NgFor:为列表中的每个项目重复一个模板。 NgSwitch:只显示多个可能元素中的一个。 NgIf  您可以通过向该元素应用NgIf指令(称为宿主元素)来添加或移除DOM中的元素。...警惕隐藏大型组件树; NgIf可能是更安全的选择。 警惕null ngIf指令通常用于防止null。 显示/隐藏是无用的。 如果嵌套表达式试图访问null属性,Angular会抛出一个错误。...*ngFor和trackBy NgFor指令可能表现不佳,特别是在大型列表中。 对一个项目,删除项目或添加项目的小改动可以触发DOM操作的级联。...声明输入和输出属性 目标属性必须明确标记为输入或输出。 在HeroDetailComponent中,这些属性使用注解标记为输入或输出属性。

30K20
  • Angular学习资料大全和常用语法汇总(让后端程序员轻松上手)

    last返回当前列表项是否为最后一个 even返回当前列表项index是否为偶数,通常用在增加样式用来区分行与行之间 odd返回当前列表项index是否为奇数 ngFor="let...元素使用的 CSS 类 ng-class-even 类似 ng-class,但只在偶数行起作用 ng-class-odd 类似 ng-class,但只在奇数行起作用 ng-click 定义元素被点击时的行为...ng-mouseup 规定当在元素上松开鼠标按钮时的行为 ng-non-bindable 规定元素或子元素不能绑定数据 ng-open 指定元素的 open 属性 ng-options 在 中每项数据的模板 ng-selected 指定元素的 selected 属性 ng-show 显示或隐藏 HTML 元素 ng-src 指定 元素的 src 属性 ng-srcset...指定 元素的 srcset 属性 ng-style 指定元素的 style 属性 ng-submit 规定 onsubmit 事件发生时执行的表达式 ng-switch 规定显示或隐藏子元素的条件

    5.4K41

    AngularDart 4.0 高级-结构指令 顶

    为什么要移除而不是隐藏? 指令可以通过将其显示样式设置为无隐藏不需要的段落。...从积极的方面来说,再次显示元素很快。 该组件的以前的状态被保存并准备显示。 该组件不会重新初始化 - 这种操作可能很昂贵。 所以隐藏和展示有时候是正确的。...您可以在分配给ngFor的字符串中启用这些功能,这是您在Angular的microsyntax中编写的。...template元素 HTML 5 是用于呈现HTML的方案。 它从不直接显示。 事实上,在呈现视图之前,Angular用注释替换及其内容。...满足Angular模板中的类似需求。 编写一个结构指令 在本节中,您将编写一个与NgIf相反的UnlessDirective结构指令。 NgIf在条件为true时显示模板内容。

    16.1K20

    解决text-overflow: ellipsis;不生效的问题

    ,overflow设置标签超出部分自动隐藏,另外提醒,该CSS属性在某些浏览器上不生效,如果不需要照顾不兼容的浏览器,比如IE,可以放心大胆使用。...当把text-overflow设为ellipsis时文本溢出内容就能显示为省略标记,而设为clip时就能把文本溢出的部分裁切掉,不过在表格里面使用text-overflow后依旧不能隐藏超出的文本,具体解决方法祥看本文...在w3cschool中css3中有个文本相关的属性text-overflow,当把它设为ellipsis时文本溢出内容就能显示为省略标记,而设为clip时就能把文本溢出的部分裁切掉,...当然,前提是设置好两个属性,那就是white-space:nowrap(强制文本在一行内显示)及overflow:hidden(溢出内容为隐藏),也就是要同时有 代码如下: {...td内的内容太多而出现换行从而影响整体的美观的问题,所以我想把文本不换行而且让超出的文本能显示为省略号,于是我就很自然的就去用了上面那三属性并且也为td设置了长度和宽度,结果神了奇,一直没把超出的文本内容给换成省略号

    7100

    【C语言刷题每日一题】——计算11-12+13-14+15 …… + 199 - 1100 的值,打印出结果

    问题分析 首先该表达式由100项组成,且有规律,表达式为奇数项时为+,表达式为偶数项时为-,可以使用循环来实现 分析表达式的每一个项,发现其都为两个数相除(或分数),被除数固定为1,除数从1到100递增...第一种实现方式——每次判断是奇数项还是偶数项对应不同的计算 解题思路 首先需要创建一个浮点型变量来存储表达式的结果,这里暂且称为sum 使用一个for循环来实现除数的递增,从1到100 进入for循环...,每次使用一条if语句判断是奇数项还是偶数项,作出+或-的计算 代码实现 #include int main() { double sum = 0.0; for (int i =...= sum + flag * 1.0 / i; flag = -flag; } printf("%lf\n", sum); return 0; } 计算结果 总结 两种解题方式在这个问题的实现上不会有太大差距...,但在计算的数据足够庞大时,第二种方式在效率上会更出色一些,因为它比第一种方式每次都少了一条if判断语句

    11810

    AngularDart4.0 指南- 显示数据 顶

    您可以通过将HTML模板中的控件绑定到Angular组件的属性来显示数据。 在这个页面中,您将创建一个包含英雄列表的组件。 您将显示英雄名单的列表,并有条件地在列表下方显示一条消息。...它应该显示标题和英雄的名字: ? 模板内嵌或模板文件? 您可以将组件的模板存储在两个地方之一中。...Angular ngFor指令来显示英雄列表中的每个项目。...它将元素(及其子元素)标记为“repeater模板”: ngFor="let hero of heroes"> {{ hero }}  不要忘记* ngFor中的主要星号...如果有三个或更少的项目,Angular会忽略该段落,所以不会显示任何消息。 有关更多信息,请参阅模板语法页面的模板表达式部分。 Angular没有显示和隐藏消息。

    5.3K10

    Angular2 之 结构型指令几个概念

    注意:这里是出现或者消失,并不是隐藏。 隐藏元素的利弊 当我们隐藏元素时,组件的行为还在继续。 它仍然附加子啊它所属于的DOM元素上,它仍然在监听事件。...在Angular应用之外,标签的默认CSS属性display是none 。 它的内容存在于一个隐藏的文档片段中。... 这时候显示的内容是'Hip! Hooray!',在Angular的控制下,DOM的效果是不同的。 ?...要么显示的包含在Template标签中,要么隐式的使用*这种语法糖去包装在Template标签中。它简化了ngIf和ngFor —— 无论是写还是读。...宿主组件的condition 属性的布尔值决定该模板的内容是否应该被显示。 ngFor Angular把*ngFor转换成一个类似的形式: <!

    3K20

    Excel催化剂功能第9波-数据透视表自动设置

    ,但感觉每中国人都有一种冲动把它改为表格形式显示,可在下拉框中选择自己想要的样式 报表布局样式操作 报表布局样式默认 报表布局样式设置后 切片器隐藏没有数据项 对数据表里不会出现的项目进行隐藏...,特别是存在交叉筛选的情况下,例如已经选择了大类,小类里不属于当前选择的大类的项目就隐藏起来不再显示(默认是显示灰色) 可能设置此项内容会引起透视表再次刷新数据,切片器较多、数据量较大时,可能速度受影响...,可酌情是否需要打开,在不太影响速度体验下才打开此设置较为合宜 对应的原生Excel操作为 切片器隐藏没有数据项操作 切片器隐藏没有数据项默认效果 切片器隐藏没有数据项设置后...镶边行(隔行填色) 可以更容易看清每一行的数据,而不会错乱地看错行 镶边行操作 镶边行默认 镶边行设置后 行列标题字段自动换行 可以更好地排版内容,不会留出大段空白或标题字段显示不全...Excel催化剂功能第5波-使用DAX查询从PowerbiDeskTop中获取数据源 - 简书https://www.jianshu.com/p/21b2ca8fd2b8 Excel催化剂功能第6波-

    2.3K30

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

    在显示数据的Showing a list property with *ngFor部分阅读更多关于ngFor和模板输入变量和模板语法页的ngFor部分 在节点内添加内容hero模板变量来显示英雄属性...显示英雄的模板应该是这样的:lib/app_component.html (styled heroes) 2>My Heroes2> ngFor...这是你在ngFor指令中定义的同一个英雄变量。 在用户输入页面和模板语法页面的事件绑定部分了解有关事件绑定的更多信息。...在结构指令页面和模板语法页面的内置指令部分阅读有关ngIf和ngFor的更多信息。 格式化选中hero 当选择的英雄细节显示在列表下方时,很难在列表中识别选定的英雄。...在模板中,将以下绑定添加到标记中: [class.selected]="hero === selectedHero" 当表达式(hero === selectedHero)为true时,Angular

    3K30

    AngularDart4.0 指南- 表单 顶

    没有绑定或额外的指令,只是布局。 在模板驱动的表单中,如果已经导入了angular_forms库,则不必为了使用库功能而对标记执行任何操作。 继续看看这是如何工作的。 刷新浏览器。...你会看到一个样式化的表单! 使用* ngFor添加powers 英雄必须从一个固定的机构批准的权力列表中选择一个超级大国。 您在内部维护该列表(在HeroFormComponent中)。...您将在表单中添加一个select,并使用ngFor(先前在“显示数据”页面中看到的一种技术)将选项绑定到powers列表。...在这个例子中,当控件是有效的或者原始的时候隐藏消息 - “pristine”意味着用户没有改变这个值,因为它是以这种形式显示的。 用户体验是开发者的选择 有些开发人员希望消息始终显示。...如果没有Angular的帮助,你需要做什么才能将按钮的启用/禁用状态连接到表单的有效性? 对你来说,这很简单: 在(增强的)表单元素上定义一个模板引用变量。 在多处的按钮中引用该变量。

    17.5K30

    Angular 显示英雄列表

    列出这些英雄 打开 HeroesComponent 的模板文件,并做如下修改: 在顶部添加 2> 然后添加表示无序列表的 HTML 元素() 在  中插入一个  元素,以显示单个...Angular 会把所点击的  上的 hero 对象传给它,这个 hero 也就是前面在 *ngFor 表达式中定义的那个。...英雄们显示在列表中,并且所点英雄的详情也显示在了页面的下方。 修复 - 使用 *ngIf 来隐藏空白的细节 该组件应该只有当 selectedHero 存在时才显示所选英雄的详情。...点击一个英雄,它的详情就出现了。 这个应用看起来又再次工作正常显示了。 英雄显示在列表中,当你单击英雄的名字的时候,有关你单击英雄的详细信息就显示在页面的底部了。...在 HeroesComponent 模板中的  元素上添加 [class.selected] 绑定,代码如下: heroes.component.html (toggle the 'selected

    4.4K70

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

    ,但是在angular中我们引入框架的一个核心模块FormsModule才可以,该指令就是将数据驱动视图的改变!...在app.modules.ts中引入forms模块 // 核心模块 import { NgModule } from '@angular/core'; //引入forms模块实现数据的双向绑定 import...-- 使用{{}}进行数据的获取 --> {{inputData}} 运行效果 NgFor NgFor和我们js中的for循环渲染数据是一致的,所以这里是比较容易理解的,简单的演示一下...{{item.id}} 运行效果 NgIf NgIf指令是可以控制页面元素的显示与消失,这里和隐藏要区别开,他的效果和css中的display:none效果是一致的,和visibility...:hidden是要区别开的,当if判断为false的时候,页面上是整个元素都消失了,而不是仅仅隐藏了css样式 在需要使用数据绑定的组件进行数据的处理 import { Component, OnInit

    2.6K30

    Angular 显示英雄列表

    列出这些英雄 打开 HeroesComponent 的模板文件,并做如下修改: 在顶部添加 2> 然后添加表示无序列表的 HTML 元素() 在  中插入一个  元素,以显示单个...Angular 会把所点击的  上的 hero 对象传给它,这个 hero 也就是前面在 *ngFor 表达式中定义的那个。...英雄们显示在列表中,并且所点英雄的详情也显示在了页面的下方。 修复 - 使用 *ngIf 来隐藏空白的细节 该组件应该只有当 selectedHero 存在时才显示所选英雄的详情。...点击一个英雄,它的详情就出现了。 这个应用看起来又再次工作正常显示了。 英雄显示在列表中,当你单击英雄的名字的时候,有关你单击英雄的详细信息就显示在页面的底部了。...在 HeroesComponent 模板中的  元素上添加 [class.selected] 绑定,代码如下: heroes.component.html (toggle the 'selected

    4K30

    毕毕业论文排版(三)-页眉页脚

    毕业论文排版(三)-页眉页脚 子墨居士 前言 页眉页码的设置上一期讲的不清楚,一般来讲,论文的封面、目录和内容的页眉页码设置是不一样的,小编的论文就如此。因此将分三个步骤来设置:分节、页眉页脚。...1.1 打开格式标记 这里先把选项设置一下格式标记,以wps为例: 文件->工具->选项->视图->格式标记。 把格式标记打开就能看到很多状态,分节的位置,空了几个空格等等。...这里讲一下,这几个分隔符: 前面三个:分页符(P)、分栏符(C)、换行符(T)是对的内容的结构进行调整,不产生分节效果。...分页符:(只是)从下一页开始 分栏符:将文章分为几栏,比如两栏(同一页显示两列) 换行符:这个单纯的换一行而已,换行后的内容和前一行的内容仍然是同一段落,只是换了一行书写。...偶数分节符--同下一页分节符差不多,只是下一章的内容从偶数页开始,例如当前页为2或3,使用偶数分节符后下一节都会从第4页开始。 奇数分节符--和偶数分节符一样的效果,只是下一页为奇数页。

    1.7K30

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

    因为前者只是隐藏,而后两者是会移除。...也就是说,前者只会初始化一次,而后两者每次显示都需要重新初始化,进一步说,若使用后两者方式,对于这里用到的swiper,它不是一个angular封装起来的组件,不会自动初始化,我们每次显示它时都需要显式调用一下...是的,在大多场景中可以直接用ion-slides,只是会有个别坑要解决,比如我们改动下ts和html文件。...数据未正确应用 对比上一节的实际效果图,会发现这里只显示了两个图片,什么原因呢?...ion-slides组件,进而内部进行初始化,此时运行看效果如下,只是此时有个比较突兀的2图向3图切换效果,有兴趣的可以试试: ?

    1.5K20

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

    显示数据 在 Angular 中最典型的数据显示方式,就是把 HTML 模板中的控件绑定到 Angular 组件的属性。...> {{ hero.name }} ` 在模板里可以自己使用.语法,访问对象属性 使用 ngFor 显示数组属性 *ngFor 是 Angular 的“迭代...它是语法中不可或缺的一部分 通过 NgIf 进行条件显示 有时,应用需要只在特定情况下显示视图或视图的一部分,这个时候使用ngif,同vue.js里的v-if 小结 带有双花括号的插值表达式 (interpolation) 来显示一个组件属性 用 ngFor 显示数组 用一个 TypeScript 类来为你的组件描述模型数据并显示模型的属性 用 ngIf... 在多数情况下,插值表达式是更方便的备选项。 实际上,在渲染视图之前,Angular 把这些插值表达式翻译成相应的属性绑定。

    15.3K30
    领券