Angular中ng-class更新后，class不随着马上更新的问题解决

最新推荐文章于 2024-11-27 12:08:42 发布
原创 最新推荐文章于 2024-11-27 12:08:42 发布 · 814 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#ng-class #ngclass #class #angular #更新

此问题略显奇怪，解决办法很简单
将表达式中的{{}}，去掉，直接使用变量名即可
如
ng-class="{'active': {{selectedCat == cat.id}}}"

替换为

ng-class="{'active': selectedCat == cat.id}"
AngularJS使用ng-class动态增减class样式的方法示例
12-02
本文实例讲述了AngularJS使用ng-class动态增减class样式的方法。分享给大家供大家参考，具体如下： 使用ng-class可以实现动态地增减样式： <!DOCTYPE html> <html ng-app="formExample"> <head> <meta charset="UTF-8"> <title></title> [removed][removed] [removed] angular.module('formExample', []) .controller('FormControl
关于angular引入ng-zorro的问题浅析
10-14
完成模块导入后，还需要在`angular.json`文件中引入Ng-Zorro的样式。在`styles`数组中添加指向ng-zorro-antd.min.css的引用，确保应用能够正确渲染组件样式： ```json "styles": [ ... "node_modules/ng-zorro-...
细说Angular ng-class
weixin_33796177的博客
05-22 211
       在前面Angularjs开发一些经验总结中我们说到在angular开发中angular controller never 包含DOM元素（html/css），在controller需要一个简单的POJO（plain object javascript object），与view完全的隔离（交互angularjs框架的职责。但在某些项目中看见controller涉及DOM的元素最多的是...
angular4实战开发问题——ngclass不起作用
weixin_30360497的博客
08-08 455
由于路由机制会导致页面不刷新。 在项目中，很多都是使用click做的路由跳转。ngclass有时候会不起作用， 这个时候我是很盲目的，一开始在考虑是不是书写的问题。ngclass需要有特定的格式？第一个参数为类名。第二个参数为布尔值。 后来经过实验发现，并不是这个问题。代码我就不上了。 后来是怎么解决的呢？当我准备重构代码的时候，发现有一个定义的函数执行了样式，但是在整个...
ng-class的问题（已解决，未找到真正的原因）
weixin_30546933的博客
05-09 258
问题来源是，在做点击选中的功能时候遇到的，之前是用js来写实现了，在改变之后用ng来写之后 ng-class="select_x select_qz {{i == $index ? 'selected-qz' : ''}}" 　　 写了上述代码， 判断是走通了，但是一直不生效。 尝试着去掉 ng 后可以实现， 具体问题还在找， 先记录下来。 后来改成下面的代码生效了 c...
(精华2020年6月4日更新)Angular基础篇 ngClass,ngStyle的使用
一点一滴
06-04 1万+
<h1>属性[ngClass]</h1> <!-- <div class="red">ngclass</div> --> <!-- <div [class] = "{'blue':true,'red':false}">ngclass演示</div> --> <div [class]="{'blue':flag,'red':!flag}">ngclass演示</div> <!--
Angular中ng-options下拉数据默认值的设定方法
12-29
今天学习了一下Angular中ng-options下拉数据默认值的设定方法，留个笔记 直接上代码 <div class=form-group> <label class=col-sm-2>教师 <div class=col-sm-10> <select style=display:block; width:100%...
Angular ng-class详解及实例代码
09-01
总的来说，`ng-class`是AngularJS中实现动态CSS类管理的强大工具，它可以灵活地根据应用程序的状态来改变元素的样式。在实际项目中，根据需求选择合适的方式来使用`ng-class`，可以有效地提高代码的可维护性和可读性...
浅谈angular4 ng-content 中隐藏的内容
08-29
本文将深入探讨 Angular4 ng-content 中隐藏的内容，并提供一些实用的解决方案。 ng-content 的基本使用 在 Angular 中，ng-content 指令用于将内容投射到组件模板中。基本使用方式是，在组件模板中添加 ng-...
Angular之ngStyle和ngClass
最新发布
hua_chi的专栏
11-27 674
ngStyle是元素的标签样式属性，动态设置元素的内联样式，接收一个对象“{ }”，对象中的键为样式属性名，值为样式值，该值可使用变量值，也可使用表达式。ngStyle和ngClass都是angular中经常使用的动态控制元素样式或样式类的指令，用的比较多，但也容易记混，老是要先查文档，记录一下。ngClass也是标签的样式属性，但它是用来动态增加或移除css样式类，因此，其所接收的可以是对象，也可以是字符串或字符串数组。screenWidth为变量， 动态设置width的样式值；
AngularJS中ng-class和class的区别
小新正在敲代码
11-08 3791
首先我们看下ng-class的写法：<style> .red{ background-color:red; } .green{ background-color:green; } </style> <div ng-class="{red:x>5,green:x<=5}"></div>我们可以看出ng-class中的属性是一个js对象的写法，key/value对。只不过这里的value
关于angular 为动态获取元素中，需要获得事件的选项添加class的说明
weixin_40098371的博客
06-06 3992
在JQ中如果要为某一项添加CLASS的话，直接使用addClass 就可以实现。那么angular要实现此项效果，就需要用ng-class。关于ng-class的使用说明，在W3C 中有说明，此处不再赘述。此处只针对我使用的部分进行说明。ng-class 可以采用key-value 的形式实现class的添加。形如：ng-class = '{key:value}'其中key为需要添加的class ...
Angular 关于ng-src不立即刷新的问题
qq_24719349的博客
04-29 1362
Angular 关于ng-src不立即刷新的问题 首先，自我介绍，我是一个怕蜜蜂的人，over~ 本篇为个人笔记，勿喷 最近用Angular写代码时候发现Angular的ng-src指令并不会立刻让图片更新，而是隔了一段时间后才更新，这个一段时间可能是3，4秒，也可能是1分钟。后来查阅资料才知道，这个指令与其他内部指令稍有不同。 按照懒汉（我）的书写习惯，一般会在服务器下发图片的url过后直...
解决d3.js在angular中添加class样式不生效问题
pgLi
08-03 2669
1、背景 在ng-alain中使用d3.js绘制曲线图，想改变坐标轴的样式。 通过.attr('class', 'd3-line-axis')的形式添加样式来覆盖d3.js默认的样式，但是一直不生效。 2、原因 .ts文件中3种添加样式的方式 1）template种直接&lt;style&gt;&lt;/style&gt; 2）通过styles: [] 3）通过st...
AngularJs通过ng-class动态改变样式类实例操作
KHOST的博客
02-12 2699
AngularJs通过ng-class动态改变样式类实例操作，代码如下：查看源码打印代码帮助01&lt;!doctype html&gt;02&lt;html lang="en"&gt;03&lt;head&gt;04    &lt;meta charset="UTF-8" /&gt;05    &lt;title&gt;Document&lt;/title&gt;06  
Angular4中[ngClass]、[ngStyle]的基本使用
热门推荐
笑尽英雄
06-05 7万+
Angular
angular2 获取到的数据无法实时更新的问题
weixin_34318326的博客
01-26 326
在修改完组件数据之后调用下面两句： this.changeDetectorRef.markForCheck(); this.changeDetectorRef.detectChanges(); 　　 注入到构造函数 constructor( private changeDetectorRef:ChangeDetectorRef ){...
Angular模板引用变量进行数据绑定页面数据值不改变、不刷新的问题
RookieLink
02-19 3669
问题描述 本文是关于angular的模板引用变量数据绑定的问题 在使用angular模板引用变量时，输入后不更新页面绑定值，页面不刷新，接下来我展示两段代码，大家有兴趣可以尝试一下。 代码示例 这样使用模板引用变量，是不起作用的： @Component({ selector: 'app-test', template: ` &lt;input #box&gt; &lt;p&gt;{{box.va...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值