首页
学习
活动
专区
工具
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.5K31

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

last返回当前列表项是否为最后一个 even返回当前列表项index是否为偶数,通常用在增加样式用来区分行与行之间 odd返回当前列表项index是否为奇数 <li *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 <select...定义集合每项数据模板 ng-selected 指定元素 selected 属性 ng-show 显示隐藏 HTML 元素 ng-src 指定 元素 src 属性 ng-srcset...指定 元素 srcset 属性 ng-style 指定元素 style 属性 ng-submit 规定 onsubmit 事件发生时执行表达式 ng-switch 规定显示隐藏子元素条件

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

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

    30K20

    AngularDart 4.0 高级-结构指令 顶

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

    16.1K20

    AngularDart4.0 指南- 显示数据 顶

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

    5.3K10

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

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

    2.3K30

    Angular2 之 结构型指令几个概念

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

    3K20

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

    显示数据Showing a list property with *ngFor部分阅读更多关于ngFor和模板输入变量和模板语法页ngFor部分 节点内添加内容hero模板变量来显示英雄属性...显示英雄模板应该是这样:lib/app_component.html (styled heroes) My Heroes <li *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 模板文件,并做如下修改: 顶部添加  然后添加表示无序列表 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和我们jsfor循环渲染数据是一致,所以这里是比较容易理解,简单演示一下...{{item.id}} 运行效果 NgIf NgIf指令是可以控制页面元素显示与消失,这里和隐藏要区别开,他效果和cssdisplay:none效果是一致,和visibility...:hidden是要区别开,当if判断为false时候,页面上是整个元素都消失了,而不是仅仅隐藏了css样式 需要使用数据绑定组件进行数据处理 import { Component, OnInit

    2.5K30

    Angular 显示英雄列表

    列出这些英雄 打开 HeroesComponent 模板文件,并做如下修改: 顶部添加  然后添加表示无序列表 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.6K30

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

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

    1.4K20

    Linux学习 - 管道、标准输入输出

    Linux下标准输入、输出、重定向、管道 Linux系统,有4个特殊符号,’, ‘|’, ‘-‘,我们处理输入和输出时存在重要但具有迷惑性作用。...标准错误还是会显示屏幕2 >&1 表示把标准错误重定向到标准输出。Linux终端用2表示标准错误,1表示标准输出。 - (短横线):表示标准输入,一般用于1个程序需要多个输入时候。...# 管道符使用 # 第一个命令输出作为第二个输入 # 前面的例子也有使用 # tr: 是用于替换字符,把空格替换为换行,文字就从一行变为了一列 ct@ehbio:~$ echo "1 2 3"...# sed = 同时输出行号 # N: 表示读入下一行;sed命令每次只读一行,加上N之后就是缓存了第2行,所有的操作都针对第一行; # s: 替换;把读取奇数行行首加一个'>'(偶数行相当于被隐藏了...# sed = 同时输出行号 # N: 表示读入下一行;sed命令每次只读一行,加上N之后就是缓存了第2行,所有的操作都针对第一行; # s: 替换;把读取奇数行行首加一个'>'(偶数行相当于被隐藏

    4.1K60

    git config配置

    水电费git,我们使用git config 命令用来配置git配置文件,git配置级别主要有以下3类: 1、仓库级别 local 【优先级最高】 2、用户级别 global【优先级次之】 3、系统级别...system【优先级最低】 通常: git 仓库级别对应配置文件是当前仓库下.git/config 【在当前目录下.git目录默认是隐藏,所以文件管理器我们要打开显示以藏文件】 git 用户级别对应配置文件是用户宿主目录下...\mingw64\etc目录下】 当然我们可以cmd命令提示符输入以下查看配置信息 1、git config –local -l 查看仓库配置【必须要进入到具体目录下,比如要查看TestGit仓库配置信息...来,我们试试删除local配置cat.name phpstorm设置换行兼容Windows(CRLF)和Linux(LF) 由于现在大多数项目都是运行在Linux服务器,很多PHP开发使用是...WINDOWS系统,最终导致Windows克隆代码,提交到git后,换行符都换成CRLF了,Linux平台上克隆下来也是CRLF换行符… phpstorm编辑器修改换行符 Git命令行修改

    1K10

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

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

    15.3K30
    领券