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]的基本使用(转载)的更多相关文章

  1. ng-class ng-style

    https://docs.angularjs.org/api/ng/directive/ngClass 翻译 表达式生成一个空格饭分隔的class字符串 一个对象,它的每一个key在其值为true的时 ...

  2. 关于ng-class,ng-style的用法

    ng-class的使用几种方式 (1):利用双向数据绑定(className根据chang2的值去匹配类) <div class="{{className}}">... ...

  3. Angular 4.x NgClass ngStyle 指令用法

    <some-element [ngClass]="'first second'">...</some-element> <some-element [ ...

  4. angular [NgClass] [NgStyle],NgIf,[ngSwitch][ngSwitchCase]

    [NgClass]  CSS 类会根据表达式求值结果进行更新,更新逻辑取决于结果的类型: string - 会把列在字符串中的 CSS 类(空格分隔)添加进来, Array - 会把数组中的各个元素作 ...

  5. Angular6 学习笔记——指令

    angular6.x系列的学习笔记记录,仍在不断完善中,学习地址: https://www.angular.cn/guide/template-syntax http://www.ngfans.net ...

  6. Angular6 学习笔记——组件详解之模板语法

    angular6.x系列的学习笔记记录,仍在不断完善中,学习地址: https://www.angular.cn/guide/template-syntax http://www.ngfans.net ...

  7. [Ng]Angular应用点概览

      1. 使用模块化写法. var app = angular.module('myApp', []); app.controller('TextController', function($scop ...

  8. angularJS内置指令一览

    基础ng指令 ng-href ng-src ng-disabled ng-readonly ng-checked ng-selected ng-class ng-style ng-show ng-hi ...

  9. 秒味课堂Angular js笔记------指令

    1.属性指令 angularjs样式相关指令: ng-class ng-style ng-href ng-src ng-attr-(suffix) ng-bind ng-cloak  没解析完之前标签 ...

  10. AngularJS初步

    AngularJS特点 遵循AMD规范 不需要操作节点 对于jquery,一般是利用现有完整的DOM,然后在这戏Dom的基础上进行二次调教了:而对于AngularJS等框架则是根据数据模型以及其对应用 ...

随机推荐

  1. c# 多线程里面创建byte数组发生内存溢出异常求解

    在多线程里面读取一个400多M的Xml文件,首先将其读入FileStream里面,然后,在执行 byte [] bts = new byte[fs.Length]; 这句代码时,出现内存溢出的异常,求 ...

  2. 机器学习算法( 二、K - 近邻算法)

    一.概述 k-近邻算法采用测量不同特征值之间的距离方法进行分类. 工作原理:首先有一个样本数据集合(训练样本集),并且样本数据集合中每条数据都存在标签(分类),即我们知道样本数据中每一条数据与所属分类 ...

  3. vhost in nodejs

    关于vhost 个人理解为vhost是一种可以在一个ip下同时部署多个不同域名站点的的概念. 其好处就是对一些小型的网站不必每个网站都占用一个ip,或者说一个服务,举个例子,vhost的概念就相当于打 ...

  4. storm 入门原理介绍_AboutYUN

    转自:http://www.aboutyun.com/thread-7394-1-1.html 了解Storm:http://www.aboutyun.com/thread-9547-1-2.html ...

  5. 腾讯课堂1:使用Jmeter内置的录制功能进行录制

    1.设置http代理服务器 打开火狐——点击选项——高级——网络——设置  设置完成点击确定 2.查看端口是否被占用的命令 netstat -ano 3.排除模式 .*\.gif .*\.css .* ...

  6. windows下解决mysql忘记password

    windows下解决mysql忘记password   mysql有时候忘记password了怎么办?我给出案例和说明!一下就攻克了!    Windows下的实际操作例如以下    1.关闭正在执行 ...

  7. ShadowCaster 代码

    Pass { Name "ShadowCaster" Tags{"LightMode" = "ShadowCaster"} CGPROGRA ...

  8. 浏览器配置工具.bat

    在Web安装的ActiveX控件,默认安装在C:\WINDOWS\Downloaded Program Files目录下,但是有时候由于Internet Explorer的安全设置,会阻止Active ...

  9. Bower和Gulp集成前端资源

    在我们开始前先介绍下流程: 安装node.js. 安装npm. 全局安装bower. 根目录创建 .bowerrc (可选) 在项目中安装bower 并创建 bower.json 文件,运行 bowe ...

  10. mybatis总结(二)

    实现简单的crud,上一节已经进行最简单的查询 这次在oracle数据库中操作,就在oracle实例中操作,分别是Dept表和Emp表,所以配置文件需要改动. 1.实体类 Dept类 public c ...