[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等框架则是根据数据模型以及其对应用 ...
随机推荐
- haproxy配置tcp负载均衡
#---------------------------------------------------------------------# 监控页面 #---------------------- ...
- cannot be translated into a null value due to being declared as a primitive type. Consid
严重: Servlet.service() for servlet [note-portal] in context with path [] threw exception [Request pro ...
- yum命令具体解释
yum(全称为 Yellow dog Updater, Modified)是一个在Fedora和RedHat以及SUSE中的Shell前端软件包管理器. 基於RPM包管理.可以从指定的server自己 ...
- 字符串的数字部分递增,如user00000001后面的数字部分递增+1
使用存储过程方式 bengin declare@namevarchar(50) set@name=(selectmax(right('user00000001',8<8是从后往前数,从1开始&g ...
- 请说明meta标签的作用。
请说明meta标签的作用. 解答: meta是用来在HTML文档中模拟HTTP协议的响应头报文.meta 标签用于网页的<head>与</head>中,meta 标签的用处很多 ...
- 抽象窗口工具包AWT (Abstract Window Toolkit) 是 API为Java 程序提供的建立 图形用户界面
抽象窗口工具包AWT (Abstract Window Toolkit) 是 API为Java 程序提供的建立 图形用户界面GUI (Graphics User Interface)工具集,AWT可用 ...
- sql 注入入门
=============安全性篇目录============== 毕业开始从事winfrm到今年转到 web ,在码农届已经足足混了快接近3年了,但是对安全方面的知识依旧薄弱,事实上是没机会接触相关 ...
- java基础-集合笔记
Iterator(foreach) 遍历时只能通过iterator去删除(添加)元素,不能直接通过集合对象删除或添加元素 Set HashSet底层是一个HashMap HashSet添加元素,先判断 ...
- jquery动态调整div大小使其宽度始终为浏览器宽度
需要设置宽度为整个浏览器宽度的div,当然我们可以使用相对布局的方式做到这一点,下面是具体实现,大家可以参考下 有时候我们需要设置宽度为整个浏览器宽度的div,当然我们可以使用相对布局的方式做到这一点 ...
- IOS开发之 -- 线程初识
对于开发者来说,多线程永远有这一层神秘的色彩,似乎是一到迈步过去的坎,在同步.异步.串行.并行.死锁这几个名字当中,逐渐的放弃治疗,下面就多线程,谈一下自己的认识,理解的肯定不全面,只是一些简单的皮毛 ...