Angular6中[ngClass]、[ngStyle]的基本使用

最新推荐文章于 2025-06-14 09:00:05 发布

转载最新推荐文章于 2025-06-14 09:00:05 发布 · 739 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

原文链接：http://www.cnblogs.com/PearlRan/p/10869841.html

收录于

当前文章被以下社区和专栏收录：

本文深入讲解Angular中的样式绑定技巧，包括ngStyle和ngClass的基本用法、条件判断及函数调用，展示了如何在HTML模板中动态修改元素的样式和类名。

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>

转载于:https://www.cnblogs.com/PearlRan/p/10869841.html

标签

#javascript #ViewUI

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

weixin_30883271

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

Synopsys 逻辑综合之 ICG

最新发布

Serven的博客

07-11

4281

文章摘要： ICG（集成时钟门控单元）是一种用于降低时钟功耗的专用逻辑单元，通过控制时钟信号的传播实现节能。其核心原理是在寄存器前插入门控逻辑（如gclk=clk&en），但需避免直接使用AND门以防止毛刺，转而采用带锁存器的专用ICG单元。在RTL设计中，符合条件（如稳定使能信号）的if(en)结构可被综合工具（如DesignCompiler）自动识别并替换为ICG。使用时需配置时序检查（如PrimeTime分析使能路径、门控时钟延迟），并注意避免组合逻辑使能、多级门控等误区。ICG是芯片低功耗设

参与评论您还未登录，请先登录后发表或查看评论

Angular 6 用户注册与登录实现详解

weixin_33072399的博客

09-04

1829

本文还有配套的精品资源，点击获取简介：Angular 6是一个前端框架，用TypeScript编写，支持依赖注入、模块化和响应式渲染等核心特性。本示例展示了如何利用Webpack 4、TypeScript和Angular的路由守卫等功能，在Angular 6中实现用户注册和登录功能。示例还包含了一个典型Angular项目的结构。通过本教程，开发者可以学习到前端身份验证的最...

Angular6入门学习

weixin_42275833的博客

09-06

1247

Anagular学习创建Anagular快捷方式全局脚手架 npm i -g @angular/cli 创建项目 ng new myapp 创建组件 ng generate component 组件名 ng g component 组件名 1.模块 NgModule,抽象的概念，用于封装组件，指令，管道等对像，与项目中的功能模块的概念对应。自定义模块 Ng g module user Ng g component user/login 提示自定义磨块中创建的组件如果希望被其他模块使用，必须做到： 1

数据库课设-工艺卡片系统（绝对可以让你通过老师的检查）

数据库课设-工艺卡片系统，设置了两个用户类型，在应对老师的检查是可以通过的，至少可以的个B

angular6傻瓜式入门教程

kingov

08-06

3万+

1 基础语法 1.0 ng new my-app ng serve --open // 创建一个main组件, 系统为该组件命名为app-main供使用, &amp;amp;lt;app-main&amp;amp;gt;&amp;amp;lt;/app-main&amp;amp;gt; ng generate component main (简写 ng g c main) ng g s ng g c session/info/msg (

Angular6 基础（数据绑定、生命周期、父子组件通讯、响应式编程）

weixin_30386713的博客

08-07

319

Angular相比于vue来说，更像一个完整的框架，本身就集成了很多模块，如路由，HTTP，服务等，而vue是需要另外引入比如(vuex，axios等)。Angular引入了依赖注入、单元测试、类等后端概念，结合TS开发，加入类型管理机制，使前端代码也能严谨化，结构化。比起vue，angular更加适用于大型项目的开发与维护。 1、项目构建 // 属于全局安装，如果之前装过了，就不用多次执行该命令...

Angular6 面向企业级的 Web 开发（一）

龙哥盟

07-06

1755

欢迎！如果你想学习并精通 Angular 开发，你来对地方了。这本书旨在向你灌输敏捷和 DevOps 的思维，让你能够自信地创建可靠和灵活的解决方案。无论你是自由职业者为小型企业开发软件，全栈开发人员，企业开发人员还是网页开发人员，你需要了解如何设计、架构、开发、维护、交付和部署 Web 应用程序，以及需要应用的最佳实践和模式并没有太大的差异。如果你要向用户群交付应用程序，从某种意义上说，你是一个全栈开发人员，因为你必须了解许多服务器技术。

angular6 ngClass 和 ngStyle学习笔记

黄彪博客

10-01

2448

文章目录知识点ngClassngStyle案例文章参考 Angular2 ngclass与ngstyle的使用知识点 ngClass [ngClass]="‘css类1 css类2’" 字符串以空格分割形式。 [ngClass]="[‘css类1’,‘css类2’]" 数组形式。 [ngClass]="{‘css类1’:true, ‘css类2’:true}" key/value形式 ...

Angular—属性ngClass、属性ngStyle

雷雨天的雷胖子

02-11

1477

目录一、概述二、属性ngClass 三、属性ngStyle 一、概述 Angular中不建议使用dom操作改变class。ngClass属性用来给标签动态绑定class。ngStyle属性用来给标签动态绑定CSS样式。二、属性ngClass 实例1 <style> .className{ color: red; } </...

Angular学习1-内置属性型指令之NgStyle、NgClass、NgModel基本使用

青颜的天空的博客

07-17

3797

Angular 属性型指令会监听并修改其它 HTML 元素和组件的行为、Attribute 和 Property。它们通常被应用在元素上，就好像它们是 HTML 属性一样，因此得名属性型指令。

Angular内置指令NgStyle与NgClass详解

gitblog_00594的博客

06-14

615

Angular内置指令NgStyle与NgClass详解在Angular开发中，动态控制元素样式和类是非常常见的需求。本文将深入探讨Angular内置的NgStyle和NgClass指令，帮助开发者掌握这两种强大的样式控制工具。为什么需要动态样式控制在传统Web开发中，我们通常使用静态CSS来控制元素样式。但在现代前端应用中，经常需要根据应用状态动态改变元素外观。Angular提供了NgSt...

[ngClass]、[ngStyle]

web

09-24

875

前提最近写angular2项目，有这么个需求后台返回status为0、1、2，分别代表正常、有隐患、未巡查。我要根据status，来在前台显示不同的样式与结果，大概这样思路 1、整理数据，形成数组，以便于在前台渲染 2、用动态class，以便于添加不同的背景 3、转换，根据0、1、2，显示正常、有隐患、未巡查的结果实现 // item是循环数组的每一项 <p >巡查结果： <span [class]='class(item.checkedStatusId)'>

Angular的ngStyle ngClass attr

MZ_的博客

01-19

895

1、基本使用 [ngStyle]="{'background-color':'blue'}" [ngClass]="{'classxxxx':true}" [attr.xxxx]='属性值' //xxxx是自定义的标签属性，‘属性值’别加双引号。如果是angular页面里的变量，直接写变量就可以。 2、综合案例隔...

angular：[ngclass]、[ngstyle]用法以及和class、[class]、style、[style]对比

jeason_chan_zju的博客

12-04

1741

1背景看前人写的代码，有一段这样设置class的模板（html）代码：[ngStyle]=“setStyles()”，其中setStyle()函数的返回值是： { "box-shadow": "10px 10px 5px gainsboro" } 其实，也可以这样写： <div [ngStyle]="{'box-shadow':isChoosen?'green':'white'}"&g...

Angular4中[ngClass]、[ngStyle]的基本使用

热门推荐

笑尽英雄

06-05

7万+

Angular

angular快速入门_在Angular 6中快速入门

cunchi8090的博客

07-23

756

angular快速入门In today's’ web development world, Angular is known as one of the most important and used frameworks. Recently, Angular 6.0 version has been launched. So, in this document, we will discuss ...

Angular6之ng build | ng build --aot | ng build --prod 三种打包的差异

weixin_59191883的博客

11-29

1619

总的来说，ng build --prod和ng build --aot都用于生产环境的构建，但是它们的工作方式有所不同。ng build --prod会进行更多的优化，包括删除未使用的代码、最小化和优化CSS、图片和其他资源等。2.ng build --aot：这个命令在构建过程中使用Ahead-of-Time (AOT)编译。在Angular中，ng build是用于构建应用的命令。下面我们来看看ng build、ng build --aot和ng build --prod这三个命令的差异。

Angular6的核心概念详解

xuxuan1997的博客

07-27

1489

Angular 2迁移组件式开发渲染更快、变化监测效率更高 Angular Mobile Toolkit 可用ES6/7、WebComponent UpgradeAdapter 两个版本代码进行适配组件及组件树（Component）核心分为Header、ContactList、Footer 父子组件：Contact 什么是生命周期钩子？ ...

如何开始使用Angular 6.0

07-25

290

了解新功能并构建应用 (Learn what’s new and build an app) Angular has released its latest version, Angular 6.0. In this article, we will understand the new features of Angular 6.0 and also set up a new project ...

angular6学习(十)：指令

七刀的专栏

06-20

2688

基础知识一：ngIf 实现功能:在输入框内输入内容，按按钮后将内容显示到下方ts文件html文件：显示：点击后：

Angular6 教程_编程入门自学教程_菜鸟教程-免费教程分享

banzhuan_it的博客

06-08

942

Angular 6是一个JavaScript框架，用于构建JavaScript，html和TypeScript中的Web应用程序和应用程序，它是JavaScript的超集。它是Angular的一个更新版本，相当于angular的6.x版本。Angular 6入门教程- 从基本到高级概念的简单的步骤了解Angular 6，其中包括概述，环境设置，项目设置，组件，模块，数据绑定，事件绑定，模板，指令，管道，路由，服务，Http服务，表单，动画，材料，CLI，示例。