1、ngStyle

基本用法

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

判断添加

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

使用函数判断

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

2、ngClass

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

基本用法

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

判断

[ngClass]="{'text-success':username == 'zxc'}"

[ngClass]="{'text-success':index == 0}"

函数

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

3、{{}}中使用函数

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

　　

Angular6中[ngClass]、[ngStyle]的基本使用的更多相关文章

  1. Angular 中 [ngClass]、[ngStyle] 的使用

    1.ngStyle 基本用法 1 <div [ngStyle]="{'background-color':'green'}"></<div> 判断添加 ...

  2. angular [NgClass] [NgStyle]，NgIf，[ngSwitch][ngSwitchCase]

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

  3. ng-class ng-style

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

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

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

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

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

  6. angularjs中ng-class常用写法，三元表达式、评估表达式与对象写法

     壹 ❀ 引 ng-class可以说在angularjs样式开发中使用频率特别高了,这不我想利用ng-class的三元运算符的写法来定义一个样式,结果怎么都想不起来正确写法,恼羞成怒还是整理一遍吧,那 ...

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

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

  8. 在 Angular6 中使用 HTTP 请求服务端数据

    第一步 准备好api接口地址, 例如 https://api.example.com/api/ 第二步 在根组件 app.module.ts 中引入 HttpClientModule 模块. // a ...

  9. AngularJS中ng-class使用方法

    转自:https://blog.csdn.net/jumtre/article/details/50802136 其他博文ng-class使用方法:https://blog.csdn.net/sina ...

随机推荐

  1. Zookeeper下载方法

    Zookeeper官网地址:http://zookeeper.apache.org/             Zookeeper下载链接:http://mirrors.tuna.tsinghua.ed ...

  2. 记录在APIO2019前

    2019-05-07 嗯, 只报名参加了APIO. 今天是五月七号,距离前往帝都参加我的退役之战, 还有八天(5.15) 然后没什么可说的, 就是记录一下这几天吧. 今天下午去学了虚树(其实没什么的) ...

  3. 防止表单submit或按钮button多次连续点击提交

    如上例子:当我点击提交按钮触发submitQuartz()函数 防止用户连续点击提交操作 方法一:获取当时点击时间,根据时间差判断 $scope.submitQuartz=function () { ...

  4. iOS客户端与网页交互文档

    很少和客户端打交道,这次由于做会活动,要和客户端配合做个分享的功能 这里总结下基本的流程,就是前端在H5 里调用客户端的方法即可 第一部分 客户端提供需求文档 网页请求设置 客户端发起请求时在HTTP ...

  5. Asp.net Core 添加 EF 工具并执行初始迁移错误解决方法(Add-Migration Initial---Build failed.)

    1.问题: 首次在ASP.NET Core项目中使用Code First模式的Entity Framework框架,在添加EF工具并做初始化迁移(perform initial migration), ...

  6. BZOJ 1500 [NOI2005]维修数列 FHQ Treap

    终于A了这题...这题还是很好...但是我太菜...重构了三遍qwq FHQ Treap大法好!qwq...~~ Ins:直接拿输入造一棵树,把原来的树split成[1,pos],[pos+1,n], ...

  7. wms-springmvc-servlet.xml

    <?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.sp ...

  8. 如何将拷贝过来的数据 *.ibd 文件生效

    1.将拷贝的数据文件   "qqq.idb"放在自己的数据库中. 一般存放在  mysql/ data/ databasename 下 2. "qqq.idb" ...

  9. python3——“->”的含义

    ->:标记返回函数注释,信息作为.__annotations__属性提供,__annotations__属性是字典.键return是用于在箭头后检索值的键.但是在Python中3.5,PEP 4 ...

  10. grep 显示匹配行的上下n行

    grep -C 5 foo file 显示file文件中匹配foo字串那行以及上下5行grep -B 5 foo file 显示foo及前5行grep -A 5 foo file 显示foo及后5行