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. 关于特殊目录如com null无法删除的处理办法

    1.把以下批处理做成一个del.bat放在桌面 del /f /a /q \\?\%1 rd /s /q \\?\%1 2.需要删除的文件或者文件夹拉到这个文件上就可以了 可以删除没有属性项目中没有安 ...

  2. 乐字节Java8核心特性之Optional类

    大家好啊,上次小乐给大家介绍了Java8最最重要的一个特性——Stream流,点击可以回顾哦. Optional<T>类(java.util.Optional)是一个容器类,代表一个值存在 ...

  3. 使用pods添加第三方的时候，出现ld: library not found for -lpop

    ld: library not found for -lpop 错误,是在使用pods添加第三方的时候,出现的编译错误,同时伴随着的是error: linker command failed with ...

  4. Jmeter_拦截Excel文件输出流到本地

    一般而言,对于页面的“导出”操作,主要经历如下两个操作:①根据数据库的内容,将文件导出到应用服务器上:②将服务器上的文件下载到本地电脑: Jmeter同LoadRunner类似,只能记录服务端与客户端 ...

  5. 通过ps给透明通道的图片添加灰度（适用于需要兼容IE7，效果很好）

    原始的图片是这样的 第一步: 第二步: 第三步: 第四步: 更多(文字居中): 1: 2: 3: 4:

  6. 基于CentOS系统下的Oracle的安装

    背景 最近的数据库的实验课,要求利用虚拟机安装CentOS系统,并在此系统上安装Oracle_11g软件实现监听,在windows系统上安装SQL Developer软件作为客户端 ,从而可以在SQL ...

  7. python 用turtle 画小猪佩奇

    from turtle import * def nose(x,y):#鼻子 penup()#提起笔 goto(x,y)#定位 pendown()#落笔,开始画 setheading(-30)#将乌龟 ...

  8. Tree and Queries CodeForces - 375D 树上莫队

    http://codeforces.com/problemset/problem/375/D 树莫队就是把树用dfs序变成线性的数组. (原数组要根据dfs的顺序来变化) 然后和莫队一样的区间询问. ...

  9. superset 配置连接 hbase

    1. 简单说明 最近配置superset查询hbase, 根据网上查询到的文档和经验,成功了一次(python3.4  superset 0.20.),后边重试换各种版本就不行了.最后根据错误终于发现 ...

  10. 【Lua】Lua中ipair和pair的区别

    pairs会遍历table的所有键值对. 而ipairs就是固定地从key值1开始,下次key累加1进行遍历,如果key对应的value不存在,就停止遍历.顺便说下,记忆也很简单,带i的就是根据int ...