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

Angular 2:仅将CSS应用于*ngFor数组中的选定项

Angular 2是一种流行的前端开发框架,用于构建Web应用程序。它是Angular框架的第二个版本,具有许多改进和新功能。

*ngFor是Angular 2中的一个内置指令,用于在模板中循环遍历数组或集合。它允许我们根据数据动态生成HTML元素。

要将CSS应用于*ngFor数组中的选定项,可以使用ngClass指令。ngClass指令允许我们根据条件动态地添加或删除CSS类。

以下是一个示例代码,演示如何在*ngFor数组中的选定项上应用CSS:

代码语言:txt
复制
<ul>
  <li *ngFor="let item of items" [ngClass]="{'selected': item === selected}">
    {{ item }}
  </li>
</ul>

在上面的代码中,我们使用*ngFor指令循环遍历名为items的数组。对于每个数组项,我们使用ngClass指令来判断是否将CSS类"selected"应用于该项。如果当前项等于选定的项(在组件中定义的selected变量),则添加"selected"类。

通过这种方式,我们可以根据条件将CSS应用于*ngFor数组中的选定项。

对于Angular 2的更多信息和学习资源,您可以访问腾讯云的Angular 2产品介绍页面:Angular 2产品介绍

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

相关·内容

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

ngFor指令遍历组件英雄列表并为该列表每个英雄呈现该模板一个实例。 表达式部分hero标识为模板输入变量,其中包含每个迭代英雄详情。...在结构指令页面和模板语法页面的内置指令部分阅读有关ngIf和ngFor更多信息。 格式化选中hero 当选择英雄细节显示在列表下方时,很难在列表识别选定英雄。...在上面添加样式元数据,有一个名为selected自定义CSS类。 为了让选定英雄更清晰可见,当用户点击英雄名字时,你将把这个选定class应用到。...添加所选CSS类。...当表达式为false时,Angular删除选定类。 ===运算符测试给定对象是否相同。 在模板语法指南中阅读有关[class]绑定更多信息。

3K30

AngularDart 4.0 高级-结构指令 顶

该指南在谈论其属性以及指令功能时引用了指令类。 指南在描述如何指令应用于HTML模板元素时引用了属性(attribute)名称。...属性指令改变元素,组件或其他指令外观或行为。 例如,内置NgStyle指令可以同时更改多个元素样式。 您可以许多属性指令应用于一个宿主元素。 您只能将一个结构指令应用于宿主元素。...*ngFor内部详解 Angular以类似的方式*ngFor转换为从星号(*)语法通过模板属性到模板元素。...您可以在分配给ngFor字符串启用这些功能,这是您在Angularmicrosyntax编写。...您将尝试*ngFor和*ngIf放在同一宿主元素上。 Angular不会允许。 您仅可以一个结构指令应用于宿主元素。 原因是简单。 结构指令可以用宿主元素及其后代完成复杂事情。

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

    学到什么 在本文中,你学到关于 Angular 结构指令模式知识点。你会知道它们是什么并且怎么去使用它们。 学完本文,你更好理解这些指令并在实际项目中使用它们。...在 Angular ,有三种标准结构化指令。...*ngIf - 根据表达式返回布尔值,有条件地包含一个模版(即条件渲染模版) *ngFor - 遍历数组 *ngSwitch - 渲染每个匹配是图 下面是一个结构化指令例子。...指令 我们使用 *ngFor 指令来遍历数组。...Angular 我们什么时候需要用结构指令呢? 如果你想在 DOM 添加或者移除一个元素时候,你就应该使用结构指令。 当然,我们还可以使用它们来更改元素 CSS 样式,或者添加事件监听器。

    3.8K20

    AngularDart4.0 英雄之旅-教程-08HTTP 顶

    你离开地方 在前一页,您学会了在仪表板和固定英雄列表之间导航,沿途编辑选定英雄。 这是这个页面的起点。 在继续英雄之旅之前,请确认您具有以下结构。 ?...使用此版本更新web / main.dart,该版本使用模拟服务:web/main.dart (v2) import 'package:angular/angular.dart'; import 'package...当应用程序使用模拟英雄列表时,更新直接应用于单个应用程序范围共享列表英雄对象。 现在,您正在从服务器获取数据,如果您希望更改持续存在,则必须将其写回服务器。...,处理程序创建命名英雄委托给英雄服务,然后英雄添加到列表。...distinct()确保当过滤器文本发生更改时才发送请求。 transform(switchMap(...))为通过debounce()和distinct()创建每个搜索调用搜索服务。

    11K30

    AngularDart4.0 英雄之旅-教程-07路由 顶

    行动计划 计划如下: AppComponent转换为处理导航应用程序外壳程序。 当前AppComponent英雄相关重新定位到单独HeroesComponent。 添加路由。...从英雄名单到选定英雄。 从“深层链接”网址粘贴到浏览器地址栏。 路由到英雄细节 您可以在AppComponent添加到HeroDetailComponent路由,其中定义了其他路由。...在HeroesComponent中选择一个英雄 在HeroesComponent,当前模板展示了一个“主/细节”风格,顶部是英雄列表,下方是选定英雄详细信息。...lib/src/heroes_component.html My Heroes <li *ngFor="let hero of heroes...为此目的,您已经收到了大约60行CSS,包括一些简单媒体查询响应式设计。 正如您现在所知,CSS添加到组件样式元数据将会隐藏组件逻辑。 相反,您将添加CSS来分隔.css文件。

    17.6K30

    Angular 快速学习笔记(1) -- 官方示例要点

    Angular 复写器(repeater)指令,使用let xx of xxs遍历 绑定click使用 (click) <li *ngFor="let hero of heroes" (click...声明了一个私有 heroService 属性, 2. 把它标记为一个 HeroService 注入点 在ngOnInit 调用service获取数据 a....使用http,需要在AppModule, @angular/common/http 中导入 HttpClientModule 符号,并把它加入 @NgModule.imports 数组 c....*ngFor 不能直接使用 Observable。 不过,它后面还有一个管道字符(|),后面紧跟着一个 async,它表示 Angular AsyncPipe。...快速学习笔记(4) -- Observable与RxJS Angular快速学习笔记(3) -- 组件与模板 Angular快速学习笔记(2) -- 架构 Angular 快速学习笔记(1) -- 官方示例要点

    3.6K00

    Angular 快速学习笔记(1) -- 官方示例要点

    Angular 复写器(repeater)指令,使用let xx of xxs遍历 绑定click使用 (click) <li *ngFor="let hero of heroes" (click...声明了一个私有 heroService 属性, 2. 把它标记为一个 HeroService 注入点 在ngOnInit 调用service获取数据 a....使用http,需要在AppModule, @angular/common/http 中导入 HttpClientModule 符号,并把它加入 @NgModule.imports 数组 c....*ngFor 不能直接使用 Observable。 不过,它后面还有一个管道字符(|),后面紧跟着一个 async,它表示 Angular AsyncPipe。...快速学习笔记(4) -- Observable与RxJS Angular快速学习笔记(3) -- 组件与模板 Angular快速学习笔记(2) -- 架构 Angular 快速学习笔记(1) -- 官方示例要点

    3.7K50

    AngularDart4.0 指南- 显示数据 顶

    您可以通过HTML模板控件绑定到Angular组件属性来显示数据。 在这个页面,您将创建一个包含英雄列表组件。 您将显示英雄名单列表,并有条件地在列表下方显示一条消息。...请注意,您不要调用new来创建AppComponent类实例。 Angular正在为你创建一个实例。 怎样创建? @Component注解CSS选择器指定了一个名为元素。...Angular ngFor指令来显示英雄列表每个项目。...元素* ngForAngular“repeater”指令。...在“模板语法”页面的microsyntax部分阅读有关模板输入变量更多信息。 Angular为列表每个项目复制,hero变量设置为当前迭代项目(英雄)。

    5.3K10

    在前端理解MVC服务之 Angular篇(完结)

    最后,在最后一篇文章,我们转换代码以将其与 Angular 框架集成。 第 1 部分。了解前端 MVC 服务:VanillaJS 点击直达 第 2 部分。...View 模型直观表示,即用户所看到部分 Controller - Model与View链接 下图是我们项目结构 该文件充当一个画布,使用 元素动态构建整个应用程序。...在此特定情况下,我们将使用数组来存储所有用户,并生成与读取、修改、创建和删除 (CRUD) 用户关联四种方法。...但是,我们注意到,前几部分许多 DOM 操作代码已通过 Angular 得到解决,它们提供了两个结构指令,如 @ ngFor 和 _ ngIf,它们允许从模板本身轻松操作 DOM。...Controller通过依赖注入(DI)接收其具有的两个依赖(Service 和 formBuilder).这些依赖存储在Controller私有变量。

    4.1K20

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

    angular基本语法,这样有利于后面我们进行梳理别的知识点做一些铺垫 基本语法 常见指令 NgModel NgModel就和vuev-model效果是一致,只是写法会有一些区别,vue是可以直接进行使用...,但是在angular我们引入框架一个核心模块FormsModule才可以,该指令就是数据驱动视图改变!...-- 使用{{}}进行数据获取 --> {{inputData}} 运行效果 NgFor NgFor和我们jsfor循环渲染数据是一致,所以这里是比较容易理解,简单演示一下...-- list索引值获取到赋值给i --> {{item.title}} - {{i}} -...{{item.id}} 运行效果 NgIf NgIf指令是可以控制页面元素显示与消失,这里和隐藏要区别开,他效果和cssdisplay:none效果是一致,和visibility

    2.5K30

    Angular4记账webApp练手项目之二(在angular4目中使用Angular WeUI)

    写在前面 在angular4目中 例子是基于之前文章:利用angular-cli构建Angular4.X项目 可以参考官网:https://cipchk.github.io/ngx-weui/...1、如何使用第三方库,安装-引用(主要参考官方文档) 2、{{}}指令,单向绑定数据,声明数据-绑定数据 3、[(ngModel)]指令,双向绑定数据,声明数据-绑定数据 4、*ngFor指令,循环渲染...安装及引用 安装 npm install angular-weui --save 安装后还需要引用weui 样式以及我们font-awesome图标苦,在我们项目index.html引用 <!...我选择固定中间按钮,使用动态绑定样式让中间部分高度等于页面高度-底部和顶部高度,设置overflo为scroll; 在accounting.component.ts添加样式数据如下: contentStyle...这里写图片描述 引用非样式组件 例如提示框组件 html添加元素 ts文件引入使用

    2.2K20

    angular5面试题_大数据面试题

    Angular提供了一种平滑机制,通过它我们可以这些依赖注入我们组件和指令。因此,我们只是在构建依赖关系,这些依赖关系可以在应用程序所有组件之间注入。...在AOT编译,编译器将与应用程序一起发送外部HTML和CSS文件,从而消除了对那些源文件单独AJAX请求,从而减少了ajax请求。...表达式(以及表达式所调用函数)少写太过复杂逻辑 不要连接太长 pipe(往往 pipe里都会遍历并且生成新数组, pipe 在anglarJS(v1)叫做filter) 变化检测策略onPush...否则,每次脏值检测过程NgFor会把列表里每一都执行更新DOM操作。...本站提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规内容, 请发送邮件至 举报,一经查实,本站立刻删除。

    4.3K20

    AngularDart4.0 英雄之旅-教程-05多组件 顶

    在这个页面,您将通过英雄细节划分为单独,可重用组件来迈向这个方向第一步。 当你完成后,应用程序应该看起来像这样。...@Component注解提供组件Angular元数据。 CSS选择器名称hero-detail将与在父组件模板中标识该组件元素标签相匹配。...HeroDetailComponent有一个英雄,而不是一个选定英雄。 在模板任何地方用单词“hero”替换“selectedHero”。...import 'src/hero_detail_component.dart'; 回想一下,hero-detail是HeroDetailComponent元数据CSS选择器。...就像您为内建Angular指令所做那样,通过将其列在元数据指令列表,告诉Angular关于英雄详细信息组件。

    1.8K10
    领券