[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等框架则是根据数据模型以及其对应用 ...
随机推荐
- poj1182食物链--并查集
动物王国中有三类动物A,B,C,这三类动物的食物链构成了有趣的环形.A吃B, B吃C,C吃A. 现有N个动物,以1-N编号.每个动物都是A,B,C中的一种,但是我们并不知道它到底是哪一种.有人用两种说 ...
- Unix系统编程()main函数的命令行参数
命令行参数输入双引号是什么效果? 好像可以去空格化.
- spring 集成 redis -- pub/sub
redis除了常用的当做缓存外,还可以当做简单的消息中间件,实现消息发布订阅 spring集成redis,可以使用spring-data-redis 首先引入相关maven依赖(此处我spring相关 ...
- ARP-Address Resolution Protocol-地址解析协议
主要内容摘自:图解TCP/IP ARP是一种解决地址问题的协议.以目标IP地址为线索,用来定位下一个应该接受数据分包的网络设备的mac地址. 如果目标主机不在同一个链路上时,可以通过ARP查找下一跳路 ...
- VMWare虚拟机 网络连接模式
这个是rocks 群里面我的一个朋友分享的,我觉很好而且描述的很清楚,这是一个做事的态度问题. 1 VMWare虚拟机bridged.host-only和NAT网络模式的区别和用法 VMWare提 ...
- tomcat修改默认端口
1.webserver: tomcat2.version: Apache Tomcat/7.0.293.operation: 修改默认端口 3.1 修改tomcat目录下的/conf/server ...
- 【PM面试题】如果让你创业,你会选择什么?
答案及理由 我会选择可穿戴设备 ,理由有三: 互联网与硬件的结合是未来的大势所趋,通过硬件来采集数据,而通过互联网或者移动互联网将这些设备连接起来,交换数据,让其形成流动的信息. 未来会从卖产品的阶段 ...
- java.awt包提供了基本的java程序的GUI设计工具
java.awt包提供了基本的java程序的GUI设计工具.主要包括下述三个概念: 组件--Component 容器--Container 布局管理器--LayoutManager package T ...
- sql server数据库数据查询成功
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding= ...
- 使用StringTokenizer分解字符串
Java切割字符串.一般使用substring.split.StringTokenizer来处理,前两种是String对象的方法,使用字符串能够直接处理,本文介绍下StringTokenizer的使用 ...