1、ngStyle

基本用法

1
<div [ngStyle]="{'background-color':'green'}"></<div>

判断添加

1
<div [ngStyle]="{'background-color':username === 'zxc' ? 'green' : 'red' }"></<div>

使用函数判断

1
<div [ngStyle]="{'background': setNameLineClass(data.status)}"></<div>

2、ngClass

第一个参数为类名称，第二个参数为boolean值，如果为true就添加第一个参数的类

基本用法

1
[ngClass]="{'text-success':true}"

判断

1
2
[ngClass]="{'text-success':username == 'zxc'}"
[ngClass]="{'text-success':index == 0}"

函数

1
<tr [ngClass]="chooseTrClass(data)">

3、{{}}中使用函数

1
<td><i nz-icon [iconfont]="setStatusIcon(data.status)" class="table-name-icon-line"></i> {{statusToCh(data.status)}}</td>

Angular 中 [ngClass]、[ngStyle] 的使用的更多相关文章

  1. angular中ng-class的一些用法

    在前面Angularjs开发一些经验总结中我们说到在angular开发中angular controller never 包含DOM元素(html/css),在controller需要一个简单的POJ ...

  2. Angular中的数据绑定

    (1)HTML绑定:{{}} (2)属性绑定:[] 注意:属性绑定通常赋值为变量,如果赋值为常量(如字符串常量) 必须用引号括起来,如<img [src]="'../../assets ...

  3. angular的ng-class

    项目内想到要替换class时,第一反应是使用angular最为简单粗暴的class改变方式: 在angular中为我们提供了3种方案处理class:        1:scope变量绑定,如上例.(不 ...

  4. 关于angular的ng-class条件判断

    angular的ng-class的多条件判断是非常好用的,不需要写过多的判断去更改他相应的class, 但大家要记住,在repeat中使用ng-class多条件判断时, 错误写法:<i clas ...

  5. (网页)angular中实现li或者某个元素点击变色的两种方法(转)

    转自脚本之家: 本篇文章主要介绍了angular中实现li或者某个元素点击变色的两种方法,非常具有实用价值,需要的朋友可以参考下 本文介绍了angular中实现li或者某个元素点击变色的两种方法,分享 ...

  6. angular中的动画效果

    用angular来形成动画效果的代码如下 <!DOCTYPE html> <html lang="en" ng-app="app"> & ...

  7. Angular中的内置指令和自定义指令

    NG中的指令,到底是什么(what)? 为什么会有(why)?以及怎样使用(how)? What: 在NG中,指令扩展HTML功能,为 DOM 元素调用方法.定义行为绑定数据等. Why: 最大程度减 ...

  8. Angular中懒加载一个模块并动态创建显示该模块下声明的组件

    angular中支持可以通过路由来懒加载某些页面模块已达到减少首屏尺寸, 提高首屏加载速度的目的. 但是这种通过路由的方式有时候是无法满足需求的. 比如, 点击一个按钮后显示一行工具栏, 这个工具栏组 ...

  9. Angular中ngCookies模块介绍

    1.Cookie介绍 Cookie总是保存在客户端中,按在客户端中的存储位置,可分为内存Cookie和硬盘Cookie.内存Cookie由浏览器维护,保存在内存中,浏览器关闭后就消失了,其存在时间是短 ...

随机推荐

  1. 2021CCPC河南省省赛

    大一萌新,第一次打比赛,虽然是线下赛,但送气球的环节还是很赞的! 这里主要是补一下自己的弱项和考试时没有做出来的题目. 1002(链接之后再放,官方还没公开题目...) 先说一下第二题,这个题一看就是 ...

  2. PHP笔记2__变量/字符串/类型转换/常量/，，

    <?php //可变变量 $a = "ok"; $$a = "fine"; $$$a = "er"; echo $ok; echo & ...

  3. Downward API —— 在容器内部获取 Pod 信息

    我们知道,每个 Pod 在被超过创建出来之后,都会被系统分配唯一的名字.IP地址,并且处于某个 Namespace 中,那么我们如何在 Pod 的容器内获取 Pod 的这些重要信息呢? 答案就是使用 ...

  4. Spring Cloud Alibaba 使用 feign 和 rebion 进行服务消费

    微服务的服务消费,一般是使用 feign 和 rebion 调用服务提供,进行服务的消费,本文将实战使用代码讲解服务的消费. 微服务环境的搭建 创建一个 springboot 项目,springboo ...

  5. 纯 CSS 自定义多行省略：从原理到实现

    文字溢出怎么展示,你的需求是什么?单行还是多行?截断,省略,自定义样式,自适应高度?在这里你都能找到答案.接下来我会由浅入深,从原理到实现,带你一步步揭开多行省略的面纱.我们先从最简单的单行溢出省略开 ...

  6. Eclipse 中的Maven常见报错及解决方法

    1.不小心将项目中的Maven Dependencies删除报错 项目报错: 点击Add Library,添加Maven Managed Dependencies又提示如下: 在这个时候需要项目右键: ...

  7. 动态sql & 抽取可重用sql

    抽取可重用的sql片段 抽取:<sql id="xx"></sql> 使用:<include refid="xx">< ...

  8. Centos8上安装Mysql8.X

    一.下载Mysql 下载地址:https://dev.mysql.com/downloads/mysql/ 二.将压缩包通过ftp软件服务器的目标位置:并解压 1.我的是放在:/root/softwa ...

  9. Docker多机网络

    前言 前面的文章主要聚焦于单机网络上,对于生产环境而言,单机环境不满足高可用的特点,所以是不具备上生产的条件,因此在开始Docker Swarm篇的时候我们先来聊聊多机网络之间Docker的通信如何做 ...

  10. 如何系统学习C 语言（下）之 预处理命令篇

    大话c语言(下)之 预处理命令篇 预处理就是在编译之前,通过一些预处理命令对源代码进行管理和控制的过程. 由源代码得到可执行的程序,会经过预处理.编译.汇编和链接几个过程 预处理命令大致可以分为文件包 ...