Angular6中[ngClass]、[ngStyle]的基本使用
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]的基本使用的更多相关文章
- Angular 中 [ngClass]、[ngStyle] 的使用
1.ngStyle 基本用法 1 <div [ngStyle]="{'background-color':'green'}"></<div> 判断添加 ...
- angular [NgClass] [NgStyle],NgIf,[ngSwitch][ngSwitchCase]
[NgClass] CSS 类会根据表达式求值结果进行更新,更新逻辑取决于结果的类型: string - 会把列在字符串中的 CSS 类(空格分隔)添加进来, Array - 会把数组中的各个元素作 ...
- ng-class ng-style
https://docs.angularjs.org/api/ng/directive/ngClass 翻译 表达式生成一个空格饭分隔的class字符串 一个对象,它的每一个key在其值为true的时 ...
- 关于ng-class,ng-style的用法
ng-class的使用几种方式 (1):利用双向数据绑定(className根据chang2的值去匹配类) <div class="{{className}}">... ...
- angular中ng-class的一些用法
在前面Angularjs开发一些经验总结中我们说到在angular开发中angular controller never 包含DOM元素(html/css),在controller需要一个简单的POJ ...
- angularjs中ng-class常用写法,三元表达式、评估表达式与对象写法
壹 ❀ 引 ng-class可以说在angularjs样式开发中使用频率特别高了,这不我想利用ng-class的三元运算符的写法来定义一个样式,结果怎么都想不起来正确写法,恼羞成怒还是整理一遍吧,那 ...
- Angular 4.x NgClass ngStyle 指令用法
<some-element [ngClass]="'first second'">...</some-element> <some-element [ ...
- 在 Angular6 中使用 HTTP 请求服务端数据
第一步 准备好api接口地址, 例如 https://api.example.com/api/ 第二步 在根组件 app.module.ts 中引入 HttpClientModule 模块. // a ...
- AngularJS中ng-class使用方法
转自:https://blog.csdn.net/jumtre/article/details/50802136 其他博文ng-class使用方法:https://blog.csdn.net/sina ...
随机推荐
- xml 的使用和解析 及解析工具
xml 一.xml简介 1. 什么是xml XML:Extensiable Markup Language,可扩展标记语言.和HTML有语法相似之处,也有作用上的不同: 和html相似: 都是由一堆标 ...
- retrying模块的安装及使用
安装retrying模块: win10用户在联网的情况下直接在cmd.exe里面键入"pip install retrying" 即可安装retrying模板 在网页正常浏览的过 ...
- thinkphp5.1使用支付宝接口(沙箱环境)
接口文件以及沙箱的测试账号可以去支付宝开发中心获取,下面给出一个简单地例子 我新建了一个控制器Pay用来专门做支付 <?phpnamespace app\index\controller; us ...
- 消息中间件 | 消息协议 | AMQP -- 《分布式 消息中间件实践》笔记
04年,AMQP开放标准被开发 06年,AMQP规范被发布 基本概念 Message:与平台无相关的数据. Publisher:向交换器发布消息的客户端应用程序 Excha ...
- excel单元格内容拆分
这几天在整理数据,但是数据都在表格的一个单元格中,看起来很不方法,所以在网上找到excel单元格内如拆分的方法,并亲测有效 介绍2种拆分的方法 方法一: (1)在B1输入公式=right(text,[ ...
- sql数据库发布、订阅同步方式操作
Sql数据库发布订阅分为两个步骤:1.发布.2.订阅.首先在数据源数据库服务器上对需要同步的数据进行发布,然后在目标数据库服务器上对上述发布进行订阅. 一.发布. 发布需要用实际的服务器名称,不能使用 ...
- Abp 添加阿里云短信发送
ABP中有短信发送接口ISmsSender public interface ISmsSender { Task<string> SendAsync(string number, stri ...
- FZU Problem 2238 Daxia & Wzc's problem
Daxia在2016年5月期间去瑞士度蜜月,顺便拜访了Wzc,Wzc给他出了一个问题: Wzc给Daxia等差数列A(0),告诉Daxia首项a和公差d; 首先让Daxia求出数列A(0)前n项和,得 ...
- (转)Linux硬链接、软链接及inode详解
inode 文件储存在硬盘上,硬盘的最小存储单位叫做“扇区”(Sector).每个扇区储存512字节(相当于0.5KB). 操作系统读取硬盘的时候,不会一个个扇区地读取,这样效率太低,而是一次性连续读 ...
- 记一次内存溢出java.lang.OutOfMemoryError: unable to create new native thread
一.问题: 春节将至,系统访问量进入高峰期.随之系统出现了异常:java.lang.OutOfMemoryError: unable to create new native thread.在解决这个 ...