当前位置: 首页 > 面试题库 >

为angular 2实现ngClassEven ngClassOdd

商兴朝
2023-03-14
问题内容

我试图在angular 2应用程序中实现ng-class-even和ng-class-odd(来自angular 1)类型的行为。

我已经在下面编写了代码,并且可以正常工作,我想知道是否还有其他方法可以做到这一点。

的HTML

<div *ngFor="#employee of employees; #index = index" [class.odd]="index%2==1" [class.even]="index%2==0" [class.selected]="employee === selectedEmployee"> 
      <p>{{employee.name}}</p>
         </div>

的CSS

.odd {
    background-color: #f2f9ff;

}
.even {
    background-color: #eceff3;
}

问题答案:

演示 方式 :http :
//plnkr.co/edit/YkcudQipF1c8iT5LCRyd?p=preview

<div *ngFor="#employee of employees; 
             #index =index;
             #isOdd=odd;
             #isEven=even"

     [class.odd]="isOdd" 
     [class.even]="isEven" 
     [class.selected]="employee === selectedEmployee"> 
     <p>{{employee.name}}</p>
</div>

新方法

替换 #let (关键字)

<div *ngFor="let employee of employees; 
             let index =index;
             let isOdd=odd;
             let isEven=even"

      [class.odd]="isOdd" 
      [class.even]="isEven" 
      [class.selected]="employee === selectedEmployee"> 
      <p>{{employee.name}}</p>

</div>


 类似资料:
  • 我附上JSON格式。我还需要将值从一个组件传递到另一个组件。除了localstorage之外,还有其他功能可以缓存值吗?

  • 本文向大家介绍angular2+nodejs实现图片上传功能,包括了angular2+nodejs实现图片上传功能的使用技巧和注意事项,需要的朋友参考一下 在使用angular2进行图片上传的时候,遇到了各种各样的问题。在多番尝试之后最终成功上传图片,下面将我的方法分享给大家: nodejs 后台代码 angular2前台代码  以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持

  • 本文向大家介绍Angular2表单自定义验证器的实现,包括了Angular2表单自定义验证器的实现的使用技巧和注意事项,需要的朋友参考一下 本文主要给大家介绍如何判断验证器的结果。在这里,我们就来看看怎样实现一个自定义的验证器。 目标 我们要实现一个验证手机号的验证器,使用的实例还是基于之前的文章里面的实例,也就是用户信息输入的表单页面。我们在手机号的元素上添加一个验证手机号的验证器。然后,如果手

  • 本文向大家介绍Angular2实现自定义双向绑定属性,包括了Angular2实现自定义双向绑定属性的使用技巧和注意事项,需要的朋友参考一下 整理文档,搜刮出一个Angular 2实现自定义 双向绑定 属性的代码,稍微整理精简一下做下分享。 使用时,就可以通过[(username)]=“你的当前属性” 进行双向绑定了。属性名 + 后缀 Change是一个约定的固定写法。 以上就是本文的全部内容,希望

  • 本文向大家介绍Angular2 Service实现简单音乐播放器服务,包括了Angular2 Service实现简单音乐播放器服务的使用技巧和注意事项,需要的朋友参考一下 引言 如果说组件系统(Component)是ng2应用的躯体,那把服务(Service)认为是流通于组件之间并为其带来生机的血液再合适不过了。组件间通信的其中一种优等选择就是使用服务,在ng1里就有了广泛使用,而ng2保持了服务

  • 问题内容: 是否有人尝试为JVM实现C#?作为Java开发人员,我一直羡慕C#,但不愿放弃JVM的可移植性和成熟度,更不用说针对它的各种工具了。 我知道JVM和CLR之间有一些重要的区别,但是有没有什么是最流行的? 问题答案: CLR和JVM之间有很大的不同。 一些例子: Java没有用户定义的值类型 Java泛型与.NET泛型 完全 不同 C#的许多方面都依赖于框架的元素-委托等。您还需要移植库

  • 问题内容: 我正在使用angular2和gulp开发一个节点应用程序。我编写了一个组件文件login.ts,如下所示: 我的bootstrap.ts文件是: 但是当我编译这些文件时,出现以下错误: 这是我的tsconfig.json: 我已经使用以下命令安装了angular2的类型: 请帮助纠正错误。 问题答案: @simon错误说的是输入错误。但是对于其他进口商品,我已经发布了此答案,可能对其他

  • Angular2 (Beta) -> Angular4 开发语言:ECMAScript6 的标准已经完成。浏览器可以支持模块、类、lambda 表达式、generator 等新特性。 开发模式:Web组件将很快实现。 移动化:针对移动优化,如:缓存预编译、触控支持。 ES6工具链 Angular2是面向未来的技术,浏览器需要支持ES6+,由于目前浏览器尚未实现ES6,需要使用垫片。 angular