[ngClass]、[ngStyle]的基本使用(转载)
1、ngStyle
基本用法
<div [ngStyle]="{'background-color':'green'}"></<div>
判断添加
<div [ngStyle]="{'background-color':username === 'zxc' ? 'green' : 'red' }"></<div>
2、ngClass
第一个参数为类名称,第二个参数为boolean值,如果为true就添加第一个参数的类
基本用法
[ngClass]="{'text-success':true}"
判断
[ngClass]="{'text-success':username == 'zxc'}"
[ngClass]="{'text-success':index == 0}"
3、例子循环显示的第一行添加text-danger样式,文字变红色
const arr = [1, 3, 4, 5, 6]
<ul>
<li *ngFor="let item of arr, let i = index">
<span [ngClass]="{'text-danger': i==0}">{{item}}</span>
</li>
[ngClass]、[ngStyle]的基本使用(转载)的更多相关文章
- ng-class ng-style
https://docs.angularjs.org/api/ng/directive/ngClass 翻译 表达式生成一个空格饭分隔的class字符串 一个对象,它的每一个key在其值为true的时 ...
- 关于ng-class,ng-style的用法
ng-class的使用几种方式 (1):利用双向数据绑定(className根据chang2的值去匹配类) <div class="{{className}}">... ...
- Angular 4.x NgClass ngStyle 指令用法
<some-element [ngClass]="'first second'">...</some-element> <some-element [ ...
- angular [NgClass] [NgStyle],NgIf,[ngSwitch][ngSwitchCase]
[NgClass] CSS 类会根据表达式求值结果进行更新,更新逻辑取决于结果的类型: string - 会把列在字符串中的 CSS 类(空格分隔)添加进来, Array - 会把数组中的各个元素作 ...
- Angular6 学习笔记——指令
angular6.x系列的学习笔记记录,仍在不断完善中,学习地址: https://www.angular.cn/guide/template-syntax http://www.ngfans.net ...
- Angular6 学习笔记——组件详解之模板语法
angular6.x系列的学习笔记记录,仍在不断完善中,学习地址: https://www.angular.cn/guide/template-syntax http://www.ngfans.net ...
- [Ng]Angular应用点概览
1. 使用模块化写法. var app = angular.module('myApp', []); app.controller('TextController', function($scop ...
- angularJS内置指令一览
基础ng指令 ng-href ng-src ng-disabled ng-readonly ng-checked ng-selected ng-class ng-style ng-show ng-hi ...
- 秒味课堂Angular js笔记------指令
1.属性指令 angularjs样式相关指令: ng-class ng-style ng-href ng-src ng-attr-(suffix) ng-bind ng-cloak 没解析完之前标签 ...
- AngularJS初步
AngularJS特点 遵循AMD规范 不需要操作节点 对于jquery,一般是利用现有完整的DOM,然后在这戏Dom的基础上进行二次调教了:而对于AngularJS等框架则是根据数据模型以及其对应用 ...
随机推荐
- c# 多线程里面创建byte数组发生内存溢出异常求解
在多线程里面读取一个400多M的Xml文件,首先将其读入FileStream里面,然后,在执行 byte [] bts = new byte[fs.Length]; 这句代码时,出现内存溢出的异常,求 ...
- 机器学习算法( 二、K - 近邻算法)
一.概述 k-近邻算法采用测量不同特征值之间的距离方法进行分类. 工作原理:首先有一个样本数据集合(训练样本集),并且样本数据集合中每条数据都存在标签(分类),即我们知道样本数据中每一条数据与所属分类 ...
- vhost in nodejs
关于vhost 个人理解为vhost是一种可以在一个ip下同时部署多个不同域名站点的的概念. 其好处就是对一些小型的网站不必每个网站都占用一个ip,或者说一个服务,举个例子,vhost的概念就相当于打 ...
- storm 入门原理介绍_AboutYUN
转自:http://www.aboutyun.com/thread-7394-1-1.html 了解Storm:http://www.aboutyun.com/thread-9547-1-2.html ...
- 腾讯课堂1:使用Jmeter内置的录制功能进行录制
1.设置http代理服务器 打开火狐——点击选项——高级——网络——设置 设置完成点击确定 2.查看端口是否被占用的命令 netstat -ano 3.排除模式 .*\.gif .*\.css .* ...
- windows下解决mysql忘记password
windows下解决mysql忘记password mysql有时候忘记password了怎么办?我给出案例和说明!一下就攻克了! Windows下的实际操作例如以下 1.关闭正在执行 ...
- ShadowCaster 代码
Pass { Name "ShadowCaster" Tags{"LightMode" = "ShadowCaster"} CGPROGRA ...
- 浏览器配置工具.bat
在Web安装的ActiveX控件,默认安装在C:\WINDOWS\Downloaded Program Files目录下,但是有时候由于Internet Explorer的安全设置,会阻止Active ...
- Bower和Gulp集成前端资源
在我们开始前先介绍下流程: 安装node.js. 安装npm. 全局安装bower. 根目录创建 .bowerrc (可选) 在项目中安装bower 并创建 bower.json 文件,运行 bowe ...
- mybatis总结(二)
实现简单的crud,上一节已经进行最简单的查询 这次在oracle数据库中操作,就在oracle实例中操作,分别是Dept表和Emp表,所以配置文件需要改动. 1.实体类 Dept类 public c ...