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. postgres_fdw

    create extension postgres_fdw; --创建扩展 create server db0 foreign data wrapper postgres_fdw OPTIONS (h ...

  2. linker 错误解决办法 地图

  3. 带权并查集【bzoj3362】: [Usaco2004 Feb]Navigation Nightmare 导航噩梦

    [bzoj]3362: [Usaco2004 Feb]Navigation Nightmare 导航噩梦 ​ 农夫约翰有N(2≤N≤40000)个农场,标号1到N,M(2≤M≤40000)条的不同的垂 ...

  4. Linux 下的dd命令使用详解

    转自:https://www.cnblogs.com/jikexianfeng/p/6103500.html 一.dd命令的解释 dd:用指定大小的块拷贝一个文件,并在拷贝的同时进行指定的转换. 注意 ...

  5. Duff and Meat（贪心）

    Duff is addicted to meat! Malek wants to keep her happy for n days. In order to be happy in i-th day ...

  6. spark_20180328

    // 2.1 条件表达式val x = 2val s = if (x > 0) 1 else -1if (x > 0) "positive" else -1// 返回值 ...

  7. excel单元格内容合并

    这几天在整理数据,有时候数据都在表格的不同单元格中,想把两格内容合并为一格,于是验证了两种方法 方法一: (1)在B1输入公式=A1&B1 (2)做完第一步后,选中B1后,鼠标移到单元格右下出 ...

  8. POJ 1556 E - The Doors

    题意:给定n堵墙,现在要你从(0,5)走去(10,5)的最短距离 思路:刚开始还想模拟,就是从(0,5)走,每次x向右一格,然后判断有没和线段相交就可以.但是它的们有可能是小数形式给出的,这样就GG了 ...

  9. python3+Appium自动化06-屏幕截图

    截图方法 save_screenshot() 该方法直接保存当前屏幕截图到当前脚本所在文件位置 driver.save_screenshot('login.png') get_screenshot_a ...

  10. The bytes/str dichotomy in Python 3 [transport]

    reference and transporting from: http://eli.thegreenplace.net/2012/01/30/the-bytesstr-dichotomy-in-p ...